因为安装webpack要用npm, 所以安装之前我们首先要安装node
第一步：初始化
要在项目根目录用npm init初始化，生成package.json文件
npm init
初始化过程中会有好多提示，可以直接回车一步步直到完成，也可以设置具体的信息
package name: (webpack) // 项目名称
version: (1.0.0) // 版本号
description: // 项目的描述
entry point: (webpack.config.js) // 入口文件
test command: // 测试命令
git repository: // git仓库
keywords: // 关键字
author: // 作者
license: (ISC)
About to write to D:\study\wnmp\PHPTutorial\WWW\test\webpack\package.json:
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes)
第二步 安装webpack
npm install webpack -g // 全局安装 或 npm install webpack --save-dev // 项目内安装
如果不想安装最新的版本那么得在webpack后面加一个@然后在填入你要安装的版本号；当然安装最新版本时可以加@版本号也可以不加@版本号
npm install webpack@xx -g npm install webpack@xx --save-dev
这里的xxx 指的版本号，如 3.1.9
注意：webpack4版需要去额外安装webpack-cli
npm install webpack-cli --save-dev
如下是package.json文件的内容：
{
"name": "webpackdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.29.5",
"webpack-cli": "^3.2.3",
}
}
注意：package.json文件中不能有注释，在运行的时候请将注释删除
如下是我的DEMO项目的目录结构
具体代码内容如下：
index.html 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack打包</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>
其中，上图中 ./dist/bundle.js 为打包后的输出的js文件
src/index.js 文件：
let Component = require('./component');
new Component();
src/component.js文件：
let Comp2 = require("./component2");
Comp2.printLog();
function Component(){
let root = document.getElementById('root');
let sidebar = document.createElement('div');
sidebar.innerText = '欢迎使用webpack工具进行js打包！';
root.append(sidebar);
}
module.exports = Component;
src/component2.js文件：
module.exports.printLog = function (){
//console.log("print info");
console.log("打印一个信息");
}
第三步 使用Webpack打包
webpack可以在终端中使用，基本的使用方法如下：
node_modules/.bin/webpack src/index.js -o dist/bundle.js
- src/index.js：是入口js文件的
- dist/bundle.js：是打包后输出的js文件
打包时的输出信息：
$ node_modules/.bin/webpack src/index.js -o dist/bundle.js
Hash: 4e280200a490a8b75419
Version: webpack 4.42.0
Time: 598ms
Built at: 2020-03-02 21:18:04
Asset Size Chunks Chunk Names
bundle.js 1.16 KiB 0 [emitted] main
Entrypoint main = bundle.js
[0] ./src/index.js 59 bytes {0} [built]
[1] ./src/component.js 280 bytes {0} [built]
[2] ./src/component2.js 124 bytes {0} [built]
在浏览器中访问的结果：
第四步 对webpack.config.js 文件的配置
const path = require('path');
module.exports = {
mode: 'production', //开发模式development 下打包的bundle不压缩 ,生产环境下打包改为： production
// 要打程序的入口文件
entry: './src/index.js',
// 输出配置
output: {
filename: 'bundle.js', //输出文件名
path: path.resolve(__dirname, 'dist') //输出文件夹
}
}
注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
有了这个配置之后，再打包文件，只需在终端里运行webpack(全局情况下)或node_modules/.bin/webpack(非全局安装需使用)命令就可以了
如下图：
