Webpack 学习

中文文档: https://doc.webpack-china.org/

配置

  1. 创建配置文件:webpack.config.js
  2. 文件配置:entrymodulepluginsoutput ;进阶配置:resolvedevServerdevtool

配置选项

  1. entry: 入口文件,有两种书写方式,单页应用一个入口和多页应用拥有多个入口。
  2. output: 输出文件,它表示的是当 webpack 编译打包完成之后怎么去输出的一个字段,里面比较常用的两个字段是 filename 和 path,这两个字段代表了输出文件的名字和路径。
  3. module: 这里面就是对不同的模块进行处理的地方了,我们知道 webpack 把所有的资源都当成模块来处理,所以对应不同类型的模块,加载的方式也会不同,而这些都是通过一个个不同的 loader 来实现的,比如 css 通过 css-loader 来进行打包。
  4. plugins: 通过插件这个选项我们能让 webpack 变得丰富多彩,不同的插件会造成不同的打包构建过程。
  5. devtool: 这里面其实就是一个 sourcemap,因为当我们打包完成之后,webpack 会生成一个或者几个文件,我们如果要去追踪错误在源码中的位置,会十分困难,这给我们调试带来很大的不方便,于是就有了这个。
  6. devServer: 这是 webpack 给我们提供的一个简单的 web 服务器,并且能够实时的重新加载。
  7. resolve: 在这里面我们能够配置,在打包编译过程中如何去解析模块,比如常用的别名 alias 等等。

loaders

module:{
    loaders: [{
        // 正则匹配
        test: '/\.html$/',
        // 对应的 loader
        loader: 'html-loader'
    }]
}
1
2
3
4
5
6
7
8

我们可以看到对于 loader,我们使用正则匹配去匹配相应的文件,然后使用相应的 loader 去解析。

特别注意:对于多个 loader 串行的解析,是从右向左的解析顺序。

插件

在这个地址我们能够看到许许多多的插件,它能够给我们的 webpack 代理不一样的构建体验。

比如说:

  • html-webpack-plugin: 这个插件会动态生成一个 html 文件。
  • clean-webpack-plugin: 这个插件会打包生成文件之前删除你提供的路径的文件。
  • HotModuleReplacementPlugin: 模块热更新插件,它会实时的更新,可以加快开发的速度。
  • DefinePlugin: 它可以创建一个在编译时可以配置的全局常量,做开发与线上区分非常有用。
  • 当然了,还有许多的插件,大家可以去尝试,自然就熟悉了。

devtool

为了更容易地追踪错误和警告,JavaScript 提供了 source map 功能,将编译后的代码映射回原始源代码。如果一个错误来自于 b.js,source map 就会明确的告诉你。

source map 有很多不同的选项可用,请务必仔细阅读它们,以便可以根据需要进行配置。

Last Updated: 12/1/2018, 9:17:12 PM