webpack小计webpack开箱即用只支持JS 和JSON 两种文件类型，通过Loaders 去支持其它文件类型并且

常见webpack 配置

entry 打包入口文件
output 打包的输入
mode 环境
loader loader配置
plugins 插件配置
optimization 优化配置
resolve 解析配置
devtool 开发工具（source map）
devServer 开发服务
target 运行环境

entry

module.exports = {
  // 单入口
  entry: './src/index.js',
  // 多入口
  entry: {
    page1: './src/page1/index.js',
    page2: './src/page2/index.js',
  }
}

output

module.exports = {
  output: {
    // 输出的文件
    filename: 'index.js',
    // 输入文件的目录
    path: path.resolve(__dirname, 'dist'),
    // 用来配置项目前缀或者文件cdn的
    publicPath: '',
    
    /*打包第三方包*/
    // 输出包的名称
    library: 'myLibrary',
    // 输出包的形式
    libraryTarget: 'umd',
  },
}

mode

module.exports = {
  // 可选值 development（开发）  production（生产） none  
  mode: 'production',  
}

下面是mode启用的默认优化

loader

webpack开箱即用只支持JS 和JSON 两种文件类型，通过Loaders 去支持其它文件类型并且把它们转化成有效的模块，并且可以添加到依赖图中。

module.exports = {
   module: {
    rules: [
      {
        // 指定匹配规则
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            // loader中传的参数
            options: {
              cacheDirectory: true,
            },
          },
          // babel-loader
          'eslint-loader',
        ],
        // 指定解析的目录
        include: [
          path.resolve(__dirname, 'src'),
        ],
        // 去除解析的目录
        exclude: [
          path.resolve(__dirname, 'node_modules'),
        ],
      },
    ],
  },
}

注意事项

loader 是从后往前解析的

常见loader

js相关 babel-loader
css相关 postcss-loader sass-loader css-loader style-loader
图片字体 file-loader url-loader
vue vue-loader

plugins

插件⽤用于 bundle 文件的优化，资源管理和环境变量注⼊

module.exports = {
  plugins: [
    // 常见plugin
     /* 工具类的 */
    // CopyPlugin   复制
    // CleanWebpackPlugin 清除
    // HotModuleReplacementPlugin 热更新
    // DefinePlugin 设置环境变量

    /* css */
    // MiniCssExtractPlugin 提取css
    // OptimizeCssAssetsPlugin 压缩css

    /* js */
    // SplitChunksPlugin 分包
    // TerserWebpackPlugin 压缩代码

    /* html */
    // HtmlWebpackPlugin
    // PreloadPlugin

    /* vue */
    // VueLoaderPlugin  处理vue
    
    /* 速度优化 */
    // dllPlugin 分包
    // HtmlWebpackExternalsPlugin 分离基础组件（使用外联js）
    // HardSourceWebpackPlugin  缓存
    // HappyPack  暂不维护了
    // thread-loader
    // terserWebpackPlugin 开启缓存
  ]   
}

optimization

 optimization: {
    // 默认压缩
    minimize: true,
    // 分包配置
    splitChunks: {
      minSize: 0,
      cacheGroups: {
        commons: {
          name: 'commons',
          chunks: 'all',
          minChunks: 2,
        },
      },
    },
    runtimeChunk: {
      name: 'manifest',
    },
  },

resolve

module.exports = {
  resolve:{
     // 别名
      alias: {
        @': path.resolve(__dirname, 'src'),
      },
      // 自动解析扩增
      extensions: ['.js', '.json', '.vue'],
      // 加载
      mainFields: ['browser', 'module', 'main'],  
  }
}

devtool

eval: 使⽤用eval包裹模块代码
source-map: 生成.map文件
cheap: 不包含列信息
inline: 将.map作为DataURI嵌⼊入，不不单独⽣生成.map⽂文件
module:包含loader的sourcemap

开发环境一般用 cheap-module-eval-source-map 测试环境一般用 source-map 线上环境不加source-map

devServer

module.exports = {
  devserver: {
    // 热更新
    hot: true,
    // 代理
    proxy: {},
    // 是否启用gzip
    compress: true,
    open: true,
    // 启用 noInfo 后，诸如「启动时和每次保存之后，那些显示的 webpack 包(bundle)信息」的消息将被隐藏。错误和警告仍然会显示。
    noInfo: true,
  },
};

常见优化

详情请见：juejin.cn/post/684490…

构建速度优化

速度分析 speed-measure-webpack-plugin

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
 
const smp = new SpeedMeasurePlugin();
 
const webpackConfig = smp.wrap({
  plugins: [
    new MyPlugin(),
    new MyOtherPlugin()
  ]
});

策略

使用高版本的node和webpack
开启多进程 thread-loader happyPack parallel-webpack
分包 DllPlugin DllReferencePlugin
使用HtmlWebpackExternalsPlugin分离基础组件，使用CDN
减少文件搜索范围
添加缓存（提升二次构建速度）babel-loader terser-webpack-plugin hard-source-webpack-plugin

打包文件优化

打包体积分析 webpack-buundle-analyzer

策略

代码懒加载，按需加载
公共资源分离
tree-shaking （必须使用es6的模块， mode:production默认开启）
scope-hoisting ModuleConcatenationPlugin mode:production 默认开启
擦除无用的css purgecss-webpack-plugin
动态polyfill -> babel-runtime-plugin
图片压缩
打包es2015代码

附件

文件指纹

hash 静态文件
chunksHash js
contenthash css

原理 www.cnblogs.com/giggle/p/95…

环境变量

cross-env 可以跨平台设置和使用环境变量

cross-env NODE_ENV=prduction

DefinePlugin

new webpack.DefinePlugin({
  'URL': JSON.stringify('xxx/xxx')    
})

vue项目babel配置

babel.config.js

module.exports = {
  presets: [
    '@babel/preset-env',
    // vue jsx
    '@vue/babel-preset-jsx',
  ],
  plugins: [
    // 不能配置动态polyfill  依赖 @babel/runtime
    [
      '@babel/plugin-transform-runtime',
      {
        absoluteRuntime: false,
        corejs: false,
        helpers: false,
        useESModules: false,
      },
    ],
 
  ],
};

.browserslistrc(适配浏览器配置)

> 1%
last 2 versions
not ie <= 8

热更新使用与原理

{
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
  devServer: {
    hot: true,
  },
}

原理 zhuanlan.zhihu.com/p/30669007

构建缓存

{
  module: {
    rules: [
      {
          test: /.js$/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                cacheDirectory: true,
              },
            },
          ],
        },
    ],
    plugins: [
      new HardSourceWebpackPlugin(),
    ],
    optimization: {
        // XXX
        // 可以用terser-webpack-plugin
        minimizer: [
          new TerserPlugin({
            // 缓存
            cache: true,
          }),
        ],
    }    
  }    
}

预加载

new PreloadPlugin({
    rel: 'preload',
    include: 'initial',
    fileBlacklist: [/\.map$/, /hot-update\.js$/],
})
new PreloadPlugin({
  rel: 'prefetch',
  include: 'asyncChunks',
}),

打包第三方库libraryTarget

umd（最全）
var
this
window
global
commonjs
commonjs2
amd

配置详情 www.webpackjs.com/configurati…