乐趣区

关于webpack:webpack打包相关

jiezi

browserify：用于将 CommonJS 编译之后能够在浏览器端应用

一、mode

开发环境 mode:'development'
生产环境mode:'production'

二、entry

entry: 入口终点

  1. string –> './src/index.js'
    单入口
    打包造成一个 chunk。输入一个 bundle 文件。
    此时 chunk 的名称默认是 main
  2. array –> ['./src/index.js', './src/add.js']
    多入口
    所有入口文件最终只会造成一个 chunk, 输入进来只有一个 bundle 文件。
    –> 只有在 HMR 性能中让 html 热更新失效~

  3. object
    多入口
    有几个入口文件就造成几个 chunk，输入几个 bundle 文件
    此时 chunk 的名称是 key
    –> 非凡用法

        {
          // 所有入口文件最终只会造成一个 chunk, 输入进来只有一个 bundle 文件。index: ['./src/index.js', './src/count.js'], 
          // 造成一个 chunk，输入一个 bundle 文件。add: './src/add.js'
        }

三、output

output: {
    // 文件名称（指定名称 + 目录）filename: 'js/[name].js',
    // 输入文件目录（未来所有资源输入的公共目录）path: resolve(__dirname, 'build'),
    // 所有资源引入公共门路前缀 --> 'imgs/a.jpg' --> '/imgs/a.jpg'
    publicPath: '/',
    chunkFilename: 'js/[name]_chunk.js', // 非入口 chunk 的名称
    // library: '[name]', // 整个库向外裸露的变量名
    // libraryTarget: 'window' // 变量名增加到哪个上 browser
    // libraryTarget: 'global' // 变量名增加到哪个上 node
    // libraryTarget: 'commonjs'
  },

filename 与缓存

  • hash，webpack 每次打包都会生成新的 hash 值
  • chunkhash，依据 chunk 生成的 hash 值，如果打包来源于同一个 chunk，那么 hash 值就一样
  • contenthash，依据文件的内容生成 hash 值，不同文件的 hash 值肯定不一样

四、loader

webpack 只能解决 js 和 json 文件，其余类型文件须要 loader 进行编译转换成 webpack 可辨认的文件

1. 解决款式文件，css、less、sass 等

style-loader: 创立 style 标签，将 js 中的款式资源插入进行，增加到 head 中失效
css-loader: 将 css 文件编译成 commonjs 模块加载 js 中，外面内容是款式字符串
less-loader: 将 less 文件编译成 css 文件
sass-loader: 将 sass 文件编译成 css 文件

生产环境解决款式文件

(1) 提取 css 成独自文件
MiniCssExtractPlugin: 应用 MiniCssExtractPlugin.loader 代替 style-loader，style-loader 内置了 HMR 性能，所以开发环境还用 style-loader

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({filename: "[name].css",
      chunkFilename: "[id].css"
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {publicPath: "../",},
          },
          "css-loader",
        ],
      },
    ],
  },
};

(2) css 兼容性解决
postcss，postcss-loader，postcss 能够在 webpack 中配置也能够在 postcss.config.js 中配置。
postcss 兼容的罕用插件 autoprefixer、postcss-preset-env
browserslist 浏览器列表配置，能够在 package.json 中配置 browserslist，也能够在.browserslistrc 配置

(3) 压缩 css
webpack5 以前的版本应用 optimize-css-assets-webpack-plugin
webpack5 及当前的版本应用 css-minimizer-webpack-plugin

2. 解决图片资源

url-loader: 基于 file-loader，减少 base64 解决
html-loader: 解决 html 文件中的 img 图片（负责引入 img，从而能被 url-loader 进行解决）

3. 解决字体资源以及其余资源

file-loader

4. 解决 js

(1) js 语法查看

eslint-loader(已过期，请应用 eslint-webpack-plugin)、eslint(详见 https://segmentfault.com/a/11…)

(2) js 兼容

babel-loader（反对缓存）
@babel/cli @babel/core（按需加载 polyfill）详见 babel 转码器
@babel/preset-env
@babel/polyfill（已过期，整体加载体积太大）

(3)js 压缩

只须要将 mode 设置为 production，js 代码会主动压缩

五、resolve

resolve: {
    // 配置解析模块门路别名: 长处简写门路 毛病门路没有提醒
    alias: {$css: resolve(__dirname, 'src/css')
    },
    // 配置省略文件门路的后缀名
    extensions: ['.js', '.json', '.jsx', '.css'],
    // 通知 webpack 解析模块是去找哪个目录
    modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
  }

六、devServer

开发环境 应用，主动编译，主动关上浏览器，主动刷新浏览器。
设置 hot:true 开启HMR（模块热替换），一个模块发生变化，只会从新打包这一个模块，而不是打包所有模块，晋升构建速度。

  • 款式文件应用 style-loader 就能够应用 HMR 性能
  • js 文件须要在 js 中批改代码，只能解决非入口 js 文件的其余文件
if (module.hot) {module.hot.accept('./print.js', function() {console.log('Accepting the updated printMe module!');
     printMe();})
 }

七、devtool

提供源代码与构建后的代码的映射。分两大类：

  • 内联，把映射关系嵌套到 js 文件中
  • 内部，独自生成一个映射文件，生产环境不必内联，而且应该暗藏源码

八、externals

避免将某些 import 的包 (package) 打包到 bundle 中，而是在运行时 (runtime) 再去从内部获取这些扩大依赖 (external dependencies)。
例如，从 CDN 引入 jQuery，而不是把它打包

九、生产环境优化

1. 解决并压缩 html

html-webpack-plugin

2. 缓存

  • 应用 babel-loader 进行 babel 缓存，cacheDirectory: true，让第二次打包构建速度更快
  • 文件资源缓存 output 里的 filename 应用 contenthash

3.treeShaking：去除无用代码

前提：1. 必须应用 ES6 模块化 2. 开启 production 环境
在 package.json 中配置

  "sideEffects": false 所有代码都没有副作用（都能够进行 tree shaking）问题：可能会把 css / @babel/polyfill（副作用）文件去掉
  "sideEffects": ["*.css", "*.less"]

4.codesplit

(1) 应用 splitChunks

  • 能够将 node_modules 中代码独自打包一个 chunk 最终输入
  • 主动剖析多入口 chunk 中，有没有公共的文件。如果有会打包成独自一个 chunk
module.exports = {
  entry: {
    index: './src/js/index.js',
    test: './src/js/test.js'
  },
  output: {filename: 'js/[name].[contenthash:10].js',
    path: resolve(__dirname, 'build')
  },
  optimization: {
    splitChunks: {chunks: 'all'}
  },
  mode: 'production'
};

(2) 应用 import 动静导入语法，能将某个文件独自打包成一个 chunk

import(/* webpackChunkName: 'test' */'./test')
  .then(({mul, count}) => {
    // eslint-disable-next-line
    console.log(mul(2, 5));
  })
  .catch(() => {
    // eslint-disable-next-line
    console.log('文件加载失败~');
  });

5. 懒加载

应用 import 动静导入语法进行懒加载

6.dll

应用 dll 技术，对某些库（第三方库：jquery、react、vue…）进行独自打包
当你运行 webpack 时，默认查找 webpack.config.js 配置文件
在 webpack.dll.js 文件中配置须要独自打包的库，DllPlugin 和 DllReferencePlugin 配合应用

退出移动版