webpack学习笔记

选项

1.devtool：通过在浏览器调试工具(browser devtools)中添加元信息(meta info)增强调试。

2.resolve.alias:创建 import 或 require 的别名，来确保模块引入变得更简单。取别名时在给定对象的键后的末尾添加 $，表示精准匹配，详见文档

3.resolve.extensions：自动解析确定的扩展，能够使用户在引入模块时不带扩展。

4.module.rules.options:传递给loader的参数。

命令语句

webpack -p与webpack --optimize-minimize --define process.env.NODE_ENV="'production'"等效。运行该语句会执行如下步骤：

• 使用 UglifyJsPlugin 进行 JS 文件压缩。
• 运行LoaderOptionsPlugin。
• 设置 NodeJS 环境变量，触发某些 package 包，以不同的方式进行编译。

webpack内置插件

1.UglifyJsPlugin:运行 UglifyJS 来压缩输出文件。在命令行中指定 --optimize-minimize，或在 plugins 配置中添加使用。

2.DefinePlugin：在原始的源码中执行查找和替换操作。
--define process.env.NODE_ENV="'production'"等同于

plugins:[
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]

表示任何出现 process.env.NODE_ENV的地方都会被替换为"production"。

3.HotModuleReplacementPlugin:webpack的内置HMR(模块热替换)插件。

4.CommonsChunkPlugin:是一个可选的用于建立一个独立文件(又称作 chunk)的功能，这个文件包括多个入口文件的公共模块。通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存起来到缓存中供后续使用。这个带来速度上的提升。new webpack.optimize.CommonsChunkPlugin(options)

5.NoEmitOnErrorsPlugin：在编译出现错误时，使用 NoEmitOnErrorsPlugin 来跳过输出阶段。这样可以确保输出资源不会包含错误。

插件

1.html-webpack-plugin：用于生成一个html5文件，将输出的webpack包通过script标签插入body中。若输出的webpack中包含任何的css资源，则这些CSS将通过<link>标签插入html的head中。

2.clean-webpack-plugin：用于在构建之前删除/清理你的构建文件夹。

3.webpack-merge：提供merge函数用来合并配置对象

url-loader

url-loader当文件小于限制，会返回DataURL。可传递limit，mimetype，prefix三个参数。

为什么可以传递name

url-loader的limit参数：如果文件大于限制（以字节为单位），则使用file-loader，并将所有参数传递给它。默认为无限制。

因此可以在options里面写上file-loader的一些参数，比如name