webpack4.0高级

环境变量

webpack --env.NODE_ENV=local --env.production --progress

Tree Shaking

　　移除JS上下文字未被引用的代码

　　只支持ES6的import和export

optimization: {
  usedExports: true
}

　　package.json

"sideEffects": ["*.css", "*.scss"],

development and production

　　webpack-merge

　　构建开发环境和生成环境

　　　　开发环境需要实时重新加载，热模块替换能力的source map和localhost server

　　　　生成环境需要更小的bundle， 更轻量级的source map

Code Splitting

　　首先介绍第一种代码分割

　　lodash

  entry: {
    main: resolve(__dirname, '../src/index.js'),
    lodash: resolve(__dirname, '../src/lodash.js')
  }

创建lodah.js

import _ from 'lodash'

window._ = _

　　其次webpack的代码分割

  optimization:{
    splitChunks:{
      chunks: 'all'
    }
  }

　　同步代码：只需要在webpack.common.js中配置optimization

　　异步代码：通过import，无需任何配置即可，会自动进行代码分割

async function getLodash() {
  const { default: _ } = await import(/* webpackChunkName: 'lodash' */ 'lodash')
  const ele = document.createElement('div')
  ele.innerHTML = _.join(['Hi', 'Susan'], '*')
  return ele
}

getLodash().then( res => {
  document.body.appendChild(res)
})

 　　split-chunks-plugin

 打包分析

　　 webpack --profile --json > stats.json

　　 webpack analyse

 　　webpack chart

 　　webpack-bundle-analyzer

filename and chunkFileName

　　filename

　　　　对应entry里面生成的文件名字

　　chunFileName　　

　　　　chunkFileName未被列在entry中，如异步加载（import）

代码异步加载（import）

　　异步加载代码，提升代码利用率，提升网页性能

Prefetching和Preloading

　　网络空闲，代码预加载，提升网页性能

document.addEventListener('click', function () {
  import(/* webpackPrefetch: true */ './click').then(({ default: func }) => {
    func();
  });
});

MiniCssExtractPlugin

　　mini-css-extract-plugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // you can specify a publicPath here
              // by default it uses publicPath in webpackOptions.output
              publicPath: '../',
              hmr: process.env.NODE_ENV === 'development',
            },
          },
          'css-loader',
        ],
      },
    ],
  },
};

　　development中热更新

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: devMode ? '[name].css' : '[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: process.env.NODE_ENV === 'development',
            },
          },
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },
    ],
  },
};

　　production中css压缩

const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
  optimization: {
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};

缓存

　　contenthash

　　格式

　　　　[<hashType>:contenthash:<digestType>:<length>]

Shimming

 　　一种垫片形式，项目中使用lodash，我们可以不需要引入lodash，webpack自动完成

    new webpack.ProvidePlugin({
      _: 'lodash'
    })

index.js代码，没引入lodash

const dom = document.createElement('div')
dom.innerHTML = _.join(['Hi', 'Susan'], ' ')
document.body.appendChild(dom)

　　imports-loader

　　模块中的this指向是一个{}，可以是用imports-loader指定this->window

use: 'imports-loader?this=>window'

TypeScript

　　ts-loader  /  typescript

{
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'ts-loader'
          }
        ]
      }

　　tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist",
    "module": "es6",
    "target": "es5",
    "allowJs": true
  }
}

 　　types search

　　index.tsx

import * as _ from 'lodash'

class Greeter {
  greeting: string
  constructor(message: string) {
    this.greeting = message
  }
  greet() {
    console.log(_.join([this.greeting, 'Go'], '_'))
  }
}

const greeter = new Greeter('Hi Susan')

greeter.greet()

devServer 

　　historyApiFallback

　　proxy

　　secure

resolve

　　alias

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/')
    }
  }
};

　　extensions

module.exports = {
  //...
  resolve: {
    extensions: ['.wasm', '.mjs', '.js', '.json']
  }
};