1、项目初始化，会自动生成package.json文件

1
2
// 初始化
npm init

2、在项目安装webpack作为依赖包

1
2
3
4
5
// 全局安装
npm install -g webpack

// 安装到你的项目目录（webpack-cli用于使用命令行）
npm install webpack webpack-cli --save-dev

3、在终端使用webpack

对入口文件(main.js)做处理，生成一个打包文件(bundle.js)。指定入口文件后，webpack将自动识别项目所依赖的其它文件，不过需要注意的是如果你的webpack不是全局安装的，那么当你在终端中使用此命令时，需要额外指定其在node_modules中的地址

1
2
3
4
5
// webpack全局安装的情况
webpack .\src\main.js .\dist\bundle.js

// webpack非全局安装的情况
node_modules/.bin/webpack .\src/main.js .\dist/bundle.js

4、通过配置文件来使用webpack

为了不用每次修改代码后都要通过终端命令对bundle.js进行更新，通过定义一个配置文件webpack.config.js来实现上步功能，然后只需在终端执行webpack(非全局安装需使用node_modules/.bin/webpack)命令可自动生成bundle.js文件

1
2
3
4
5
6
7
8
const path = require('path')    // 定义根目录
module.exports = {
    entry: path.join(__dirname,'./src/main.js')    // 入口
    output:{    // 输出文件相关的配置
        path: path.join(__dirname,'./dist')    // 打包后文件存放的地方
        filename: 'bundle.js'        // 打包后输出文件的文件名
    }
}

5、更快捷的执行打包任务

在命令行中输入命令需要代码类似于node_modules/.bin/webpack这样的路径其实是比较烦人的，不过值得庆幸的是npm可以引导任务执行，对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置即可，设置方法如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "name": "webpack-sample-project",
  "version": "1.0.0",
  "description": "Sample webpack project",
  "scripts": {
    "start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除
  },
  "author": "zhang",
  "license": "ISC",
  "devDependencies": {
    "webpack": "3.10.0"
  }
}

注：

- package.json中的script会按照一定顺序寻找命令对应位置，本地的node_modules/.bin路径就在这个寻找清单中，所以无论是全局还是局部安装的Webpack，你都不需要写前面那指明详细的路径了。

- npm的start命令是一个特殊的脚本名称，其特殊性表现在，在命令行中使用npm start就可以执行其对于的命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name}如npm run build

- webpack帮我们打包生成的bundle.js文件，并没有存放到实际的物理磁盘上，由于每次保存代码后都要更改bundle.js所以为了访问速度快些而是直接托管到了电脑的内存中，所以我们在项目根目录中，根本找不到这个打包好的bundle.js

6、打包发布

（1）为什么要打包发布？

项目开发完成之后，需要使用webpack 对项目进行打包发布，主要原因有以下两点：

  • 开发环境下，打包生成的文件存放与内存中，无法获取到最终打包生成的文件。
  • 开发环境下，打包生成的文件不会进行代码压缩和性能优化。

（2）配置webpack的打包发布

1
2
3
4
"scripts": {
    "dev": "webpack serve",
    "build": "webpack --mode production"
}

–mode 是一个参数项，用来指定webpack的运行模式。

production代表生产环境，会对打包生成的文件进行代码压缩和性能优化。

注意：通过–mode 指定的参数项，会覆盖webpack.config.js 中的model选项。