webpack

[wangyong315]

为什么需要构建工具

• 转换es6等高级语法
• 转换jsx
• css前缀补齐/预处理器
• 压缩混淆
• 图片压缩

为什么选择webpack

• 社区生态丰富
• 配置灵活和插件化扩展
• 官方更新迭代速度块

初始webpack配置文件

webpack.config.js 可以通过 webpack --config指定配置文件 "build": "webpack --config webpack.prod.js --mode production" 基本配置： entry // 默认为 ./src/index.js output // 默认为 ./dist/main.js mode module plugins

常用的loader

babel-loader // 转换高级语法 es6 -> es5
file-loader // 把文件输出到一个文件夹中，在代码中通过相对URL去引用输出的文件，进行图片字体等资源进行打包
css-loader // 加载.css，支持模块化 压缩 文件导入特性
less-loader // 支持将less文件转换成css
style-loader // 把css代码注入到js中，通过DOM操作加载CSS
ts-loader  // 将ts转换成js
raw-loader  // 加载文件的原始内容
url-loader // 与file-loader 可以设置一个阈值，大于阈值会交给file-loader, 小于阈值返回文件的base64形式编码（处理图片和字体）

style-loader文档过一边

• 安装 npm i style-loader -S
• 推荐和css-loader 一起使用

使用方法

module.exports = {
  module: {
    rules: {
      {
        test: /\.css$/i,
        use: [
          { loader: 'style-loader', options: { injectType: 'linkTag' }, 'css-loader'},
        ]
      }
    }
  }
}

配置项

injectType: 设置样式文件以何种方式插入在DOM中 // 默认值 sytleTag

• styleTag: 使用多个style标签插入 //
• singletonStyleTag: 只使用一个style标签插入
• lazyStyleTag: 需要遵循规范 .lazy.less .less sytle.use(),使用多个标签
• singletonLazyStyleTag: 使用一个style标签
• linkTag 插入多个link标签

attributes 会在style 或者 link上插入对应的值。默认 {}

使用方法

 { loader: 'style-loader', attributes: {id: 'id' }},

<style id="id"></style>

insert type: string/Funciton default: head

改变css文件在html中插入的位置

base

esModule default true

改变esModule方式

url-loader 可以处理图片和字体

可以设置较小资源自动转为base64

options: {
  limit: 102040 // 单位 byte
}

常用的plugins都有那些

CommonChunkPlugin 将chunks相同代码模块提取成公共js CleanWebpackPlugin 清理构建目录 ExtractTextWebpackPlugin 将css 从 bundle文件中提取成一个独立的css文件 CopyWebpackPlugin 将文件或者文件夹复制到构建目录 HtmlWebpackPlugin 创建html文件去承载输出bundle UglifyjsWebpackPlugin 压缩js ZipWebpackPlugin 将打包出的资源成成一个zip包

webpack中的文件监听

• --watch
• watch: true 缺点：每次需要手动刷新浏览器

文件监听的原理分析： 轮询判断文件的最后编辑时间是否变化，某个文件发生了变化，并不会立刻告诉监听者，而是先缓存起来，等aggregateTimeout

module.export = { watch: true, // 开启监听模式 options才有意义 watchOptions: { ignored: /node_modules/, aggregateTimeout: 300, // 监听到变化发生后等300ms再去执行，默认300ms poll: 1000 // 判断文件是否发生变化是通过不停的询问系统指定的文件有没有发生变化实现的，默认轮询每秒1000次 } }

热更新 webpack-dev-server

• wds 不刷新浏览器
• wds不输出文件，而是放在内存中
• 使用hotModuleReplacementPlugin 插件 使用webpack-dev-middleware WDM将webpack输出的文件传输给服务器

[wangyong315]

文件指纹--就是打包后输出的文件明的后缀

Hash 整个项目构建有关 Chunkhash 和webpack打包的chunk有关 Contenthash 和文件的内容有关。

js的文件指纹设置

设置output的filename 使用 [chunkhash]

css的文件指纹设置

设置MiniCssExtractPlugin的filename 使用 contenthash

new MiniCssExtractPlugin({
  filename: `[name][contenthash:8].css`
})

图片的文件指纹

设置file-loader的name 使用[hash]

options: {
  name: 'img/[name][hash:8].[ext]'
}

js文件的压缩

uglifyjs-webpack-plugin

css文件的压缩

optimize-css-assets-webpack-plugin 同时使用cssnano

new OptimizeCssAssetsPlugin({
  assetNameRegExp: /\.css$/g,
  cssProcessor: require('cssnano')
})

html文件的压缩

修改html-webpack-plugin 设置压缩参数

+ new HtmlWebpackPlugin({
+ template: path.join(__dirname, 'src/search.html’),
+ filename: 'search.html’,
+ chunks: ['search’],
+ inject: true,
+ minify: {
html5: true, 
collapseWhitespace: true, 
preserveLineBreaks: false, 
minifyCSS: true,
minifyJS: true,
removeComments: false
+ +} + })