1.创建一个项目
命令行进入项目目录，运行npm init命令，根据需要填写项目信息，入口文件为index.js, 其他略...
2. 在进入项目目录安装webpack和webpack-cli
npm install webpack webpack-cli --save-dev
3.编写项目代码
添加index.html、index.js、add-content.js
add-content.js有一个write方法向页面输出HelloWorld，内容如下：
1 function write() {
2 document.write('Hello World')
3 }
4 var app = {}
5 app.write = write
6
7 export default app;
index.js引用add-content，并调用里面的方法，内容如下：
1 import app from './add-content' 2 app.write();
index.html内容如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <script src="./dist/bundle.js"></script> 8 <title>HelloWorld</title> 9 </head> 10 <body> 11 12 </body> 13 </html>
注意，这里index.html引用的是 dist/bundle.js.
4. webpack 打包项目，命令如下
npx webpack --entry=./index.js --output-filename=bundle.js --mode=development
打包后项目目录下会增加，dist/bundle.js，此时浏览器运行index.html会到如下效果
说明：
a. webpack webpack-cli 是在项目目录下安装的无法运行webpack命令，所以使用npx
b. --entry是项目的入口文件，webpack默认入口文件为src/index.js，因此如果和默认一致可以不写该配置项
c. --output-filename 打包后的输出目录 ，webpack默认入口文件为dist/main.js，因此如果和默认一致可以不写该配置项
d. --mode 打包模式，有development、production、none三种模式
5. 每次打包都输入一长串命名太麻烦了，可以在package.json中进行配置
package.json中的script项添加build
1 "build": "webpack --entry=./index.js --output-filename=bundle.js --mode=development",
这样在命令行输入 npm run build就可以了.
6. 到目前为止已经可以开发了，不过开发过程中每次改动后都需要打包、刷新页面，有些低效，那么webpack-dev-server就很好地解决了这个问题。
安装：npm install webpack-dev-server --save-dev
package.json中的script项添加dev，设置host、port和publicPath
1 "dev": "webpack-dev-server --host=172.23.119.121 --port=9006 --publicPath=/dist",
这样在命令行输入 npm run dev就可以了.
7.参数太多可以放在单独的文件里面
在项目根目录下新建webpack.conifg.js文件，内容如下：
1 module.exports = {
2 entry: './src/index.js',
3 output: {
4 filename: 'bundle.js'
5 },
6 mode: 'development',
7 devServer: {
8 publicPath: '/dist/',
9 hot: true,
10 compress: true,
11 host: '172.23.119.121',
12 port: 9006
13 }
14 }
同时修改package.json的scripts:
1 "build": "webpack",
2 "dev": "webpack-dev-server",
命令行输入 npm run dev即可。
webpack默认配置文件为根目录下的webpack.conifg.js，如果指定配置文件可以像下面这样写：
1 "build": "webpack --config=./build/config.js",
2 "dev": "webpack-dev-server --config=./build/config.js",
config后面的路径是相对于根目录的。