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 配合应用