再撸一遍webpack

Webpack

核心概念

• 入口（entry）

  • 单入口 entry: './src/main.js'

    如果传入的是文件路径数组，将创建多个主入口，导出一个‘chuck’

  • 多入口

    entry: {
        app: './src/app.js',
        vendors: './src/vendor.js
    }
    

    应用场景：

    分离app和第三方库入口

    多页面应用

• 出口 （output）

  output: {
      path: path.resolve(__dirname, 'distlm'),
      filename: 'my.bundle.js'
  }
  

  多入口页面出口配置

  entry: {
      app: './src/app.js',
      search: './src/search.js'
  },
  output: {
    path: path.resolve(__dirname, 'distlm'),
      filename: '[name].js'
  }
  
  

• loader 可以让webpack取处理非js文件

  module: {
      rules: [
        { 
            test:/\.txt$/, 
            use: 'raw-loader'
        },
         {
           test: /\.tsx?$/,
           exclude: /node_modules/,
           use: [
            'babel-loader',
            {
              loader: 'ts-loader',
              options: {
                appendTsSuffixTo: [/\.vue$/],
              }
            },
          ]
        },
      ]
    }
  

• 插件（plugins）

  webpack插件是一个具有apply属性的javascript对象

• 模式（mode）

​ 可选值：developmemt ／ production, 用来启用相应模式下的webpack内置的优化

mainfest

当编译器（compiler）开始执行，解析和映射应用程序时，它会保留所有模块的详细要点，这个数据集合称为‘manifest’

构建目标（targets）

Web pack.config.js

module.exports = {
    target: 'node' //使用 node webpack 会编译为用于「类 Node.js」环境
}

模块热替换（hot module replacement）HRM

Webpack 内置的插件

只用于开发模式

const webpack = require('webpack')
devServer: {
      contentBase: './dist',
+     hot: true
    },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Hot Module Replacement'
      }),
+     new webpack.HotModuleReplacementPlugin()
    ],

tree shaking

【摇树优化】移除js上下文中未引用代码（dead-code）

// webpack.config.js
mode: 'production' // 可以达到tree shaking 效果

生产环境构建

将生产环境和开发环境分别做配置，但保留一个通用的配置，通过webpack-merge合并配置

指定环境

webpack 内置的 DefinePlugin插件 指定系统环境变量

 new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('production')
 })
// process.env.NODE_ENV 在src/ 目录下都可以直接访问

split CSS

ExtractTextPlugin 将CSS文件分离成单独文件

已废弃，使用mini-css-extract-plugin替代

代码分离

webpack-bundle-analyzer 打包分析插件

• 入口起点配置

  使用entry配置

• CommonsChunkPlugin去重和分离chunk

  const webpack = require('webpack');
  plugins: [
      new webpack.optimize.CommonsChunkPlugin({
         name: 'common' // 指定公共 bundle 的名称。
     })
  ]
  

  4.0已废弃commonsChunkPlugin，使用optimization.splitChunks替代

  optimization: {
          // 合并相同的包, 放到vendors
          splitChunks: {
              chunks: 'all',
          }
      },
  

• 动态导入，懒加载

  output: {
      chunkFilename: '[name].bundle.js', // 决定非入口chunk的名称
      ...
  }
  

  使用reuqire() 或import() 动态引入组件

  const PurchaseTask = () => import ( /* webpackChunkName: "dashboard.task" */ '@/views/Dashboard/TaskList/PurchaseTask/index.js' ) 
  // 会打包出 dashboard.task.c442502cdaa6eaa95f2f.js