Webpack 工具简单使用

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

创建 package.json 文件

首先，先在项目目录下面创建 package.json 文件，package.json 文件中定义了项目的相关信息，以及他所依赖于哪些模块。

yarn init

执行上面的指令后，会提示你输入项目的相关信息，根据所给出的相关提示输入即可。

安装 Webpack

# 安装到全局
yarn global add webpack

# 安装到当前项目
yarn add -D webpack

执行指令安装时，若提示没权限，那么前面加个 sudo，或者切换到权限较高的账户下安装。

还有一点注意的是，如果没有安装到全局，那么文章下面所有带 webpack 指令的，都应该换成

node_modules/.bin/webpack

当然也有其他方法，那就是通过修改 package.json 文件，在 scripts 块中添加 "start": "webpack"

然后下文的 webpack 替换为

yarn start

简单使用一下

创建一个叫 test 的目录用于测试，之后里面新建两个文件，文件名分别为 hello.js main.js

其中 hello.js 的目的用于测试，而 main.js 则是作为程序的入口，引入 hello.js 文件。

hello.js

alert('hello world!')

main.js

require('./hello')

然后执行下面的指令：

webpack test/main.js ./build.js

上面的指令通过我刚才创建的 test 目录中的 main.js 文件在项目目录下生成了一个 build.js 文件。

接着创建一个 html 文件，引入刚才所生成的那个 build.js 文件。

test.html

<script src="./build.js"></script>

在浏览器打开 test.html 文件后。可以看到执行了 test.js 文件中的内容，弹出了 hello world 的提示框。

使用 Webpack 配置

每次都要在终端去敲那么长的指令，很麻烦有木有。那么现在我可以使用 Webpack 的配置来简化一下流程。

在项目目录创建一个叫做 webpack.config.js 的文件，没错这个就是 Webpack 的配置文件的名字了。

在里面写入下面的内容：

module.exports = {
  // 入口文件
  entry: __dirname + '/test/main.js',
  output: {
    // 生成的文件所在目录
    path: __dirname,
    // 生成的文件的名字
    filename: 'build.js',
  },
}

其中 __dirname 代表的是项目目录。他是在 node.js 中所提供的一个全局变量。

然后在终端执行：

webpack

同样可以达到相同生成的效果，只不过是输入的指令更简短一些了。

Webpack 中的 JSON Loader

通过 Loaders 可以使 Webpack 对各种类型的文件进行处理。Loader 需要手动安装并配置在 webpack.config.js 文件中的 module 块下。下面我将使用 JSON Loader 处理 JSON 文件。

安装

yarn add -D json-loader

配置

这里有几个可用的配置项参考：

test：文件名匹配正则（必选）
loader：loader 名（必选）
query：额外设置选项（可选）
include：手动指定必须处理的文件或文件夹（可选）
exclude：手动指定不要处理的文件或文件夹（可选）

module.exports = {
  // 入口文件
  entry: __dirname + '/test/main.js',
  output: {
    // 生成的文件所在目录
    path: __dirname,
    // 生成的文件的名字
    filename: 'build.js',
  },
  // 添加module块
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader',
      },
      // ...
    ],
  },
}

使用

将 test 目录下面的 hello.js 文件重命名为 hello.json，并修改内容如下：

{
  "balbal": "hello world!"
}

再修改 test/main.js 入口文件的内容：

var hello = require('./hello')
alert(hello.balbal)

执行 webpack，打开项目目录下的 test.html 文件，可以看到弹出了 hello world!

上面就完成了对 JSON 文件的打包，接下来说下对 CSS 文件的打包。

Webpack 中的 CSS Loader

安装

对 CSS 文件打包，依赖 2 个 loader，第一个 css-loader 是对 CSS 文件中的 url(..) 进行处理。第二个 style-loader 是将 CSS 放到页面中。这里需要两个配合使用，先处理掉 url()，然后再把 处理后 的内容加入到页面中。

yarn add -D css-loader style-loader

配置

module.exports = {
  // 入口文件
  entry: __dirname + '/test/main.js',
  output: {
    // 生成的文件所在目录
    path: __dirname,
    // 生成的文件的名字
    filename: 'build.js',
  },
  // 添加module块
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader',
      },
    ],
  },
}

需要注意的地方是：多个 loader 中间我使用 ! 分隔开了。在 Webpack 读取配置的时候，会依次读取到 css-loader style-loader (从右往左)，所以执行时也是先 css 再 style。

使用

配置完成之后，就剩下测试了，把 test/hello.json 文件改名为 hello.css，并修改内容：

body {
  background: yellow;
}

再把 test/main.js 中的内容修改为：

require('./hello.css')

执行 webpack，然后打开项目目录下的 test.html 文件，整个页面变黄了。

Webpack 中的 Plugin

再介绍一下 Webpack 里面的插件。其实 Plugin 与 Loader 都差不多，他们两个最大区别应该是分工不同。Loader 的作用已经知道了，是对比如 JS 文件 CSS 文件 JSON 文件这些打包的，而 Plugin 是干嘛的，我写个例子来看下。

这里以 UglifyJsPlugin 这个插件来介绍，用它我可以对生成的 build.js 文件压缩。

配置

插件的配置依然是放在 webpack.config.js 文件中，插件的信息放在 plugins 块中。

修改 webpack.config.js 文件的内容为：

module.exports = {
  // 入口文件
  entry: __dirname + '/test/main.js',
  output: {
    // 生成的文件所在目录
    path: __dirname,
    // 生成的文件的名字
    filename: 'build.js',
  },
  // 添加module块
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader',
      },
    ],
  },
  // 添加plugin块
  plugins: [new (require('webpack').optimize.UglifyJsPlugin)()],
}

所有插件均写在 plugins 块中。以数组的形式来表示。由于我所使用的 UglifyJsPlugin 插件是 Webpack 带的，所以在使用前需要引入 webpack 这个对象，我使用 require() 函数将其引入。

使用

在 test 文件夹内，新建 word.js 文件，内容为：

for (var i = 0; i < 10; i++) {
  document.write('我是word.js')
}

修改 test/main.js 中的内容为：

require('./word')
require('./hello.css')

执行 webpack 指令，查看一下 build.js 文件已经被压缩了。