代码分离

入口起点

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode:'development',//开发环境
  entry: { //入口文件
    index: {
      import:'./src/index.js',
      dependOn: 'shared'
    },
    another: {
      import:'./src/another-module.js',
      dependOn:'shared'
    },
    shared:'lodash'
  },
  devtool: 'inline-source-map',//开启source-map
  devServer:{
    static: './dist'
  },
  plugins:[
    new HtmlWebpackPlugin({ // 添加html文件并注入依赖
      title:'管理输出'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname,'dist'),
    clean:true //每次构建清理dist目录旧文件
  },
  optimization:{//一个html设置多个入口时
    splitChunks:{
      chunks:'all'
    }
  }
}

动态导入

async function getComponent(){
  const element = document.createElement("div")
  const {default:_} = await import('lodash')
  element.innerHTML = _.join(['Hello','webpack'],' ')
  return element
}
getComponent().then(component=>{
  document.body.appendChild(component)
})

预获取prefetch

import(/* webpackPrefetch: true */ './path/to/LoginModal.js');

预加载preload

import(/* webpackPreload: true */ 'ChartingLibrary');

缓存

• 输出文件的文件名，用hash表示文件名

filename: '[name].[contenthash].js',

• 将runtime代码拆分为一个单独的chunk

  optimization:{
    runtimeChunk:'single'
  }

• 模块标识符,vendor前后构建hash不变

moduleIds: 'deterministic',

创建一个Library（需要了看）

构建性能(内容较多，专门看)

模块热替换

• 常用配置(推荐)

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: {
       app: './src/index.js',
      print: './src/print.js',
    },
    devtool: 'inline-source-map',
    devServer: {
      static: './dist',
     hot: true,
    },
    plugins: [
      new HtmlWebpackPlugin({
        title: 'Hot Module Replacement',
      }),
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
      clean: true,
    },
  };

• 指定入口的方式

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require("webpack")

module.exports = {
  // mode:'development',//开发环境
  entry: { //入口文件
    app: './src/index.js',
    hot: 'webpack/hot/dev-server.js',
    client: 'webpack-dev-server/client/index.js?hot=true&live-reload=true'
  },
  devtool:'inline-source-map',
  devServer:{
    static:'./dist',
    hot:false,
    client:false
  },
  plugins:[
    new HtmlWebpackPlugin({
      title:"Hot Module Replacement"
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname,'dist'),
    clean:true //每次构建清理dist目录旧文件
  }
}

• css热更新

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode:'development',
  entry: {
    app: './src/index.js',
    print: './src/print.js',
  },
  devtool: 'inline-source-map',
  devServer: {
    static: false,
    hot: true,
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Hot Module Replacement',
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
};

Tree shaking

• package.json中配置sideEffects

{
  "name": "your-project",
  "sideEffects": ["./src/some-side-effectful-file.js", "*.css"]
}

• 将函数调用标记为无副作用

/*#__PURE__*/ double(55);

环境配置

webpack.common.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    app: './src/index.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Production',
    })
  ],
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  }
};

webpack.dev.js

const {merge} = require('webpack-merge')
const common = require("./webpack.common.js")

module.exports = merge(common,{
  mode:'development',
  devtool:'inline-source-map',
  devServer:{
    static:'./dist'
  }
})

webpack.prod.js

const {merge} = require('webpack-merge')
const common = require("./webpack.common.js")

module.exports = merge(common,{
  mode:'production',
  devtool:'source-map'
})

Shimming 预置依赖

• 预置全局依赖，如果在多个文件中使用了，将会比较有用

const path = require('path');
const webpack = require('webpack')

module.exports = {
  entry: {
    app: './src/index.js',
  },
  plugins: [
    new webpack.ProvidePlugin({
      _:'lodash'
    })
  ],
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  }
};

• 配置数组路径，按需引入

const path = require('path');
const webpack = require('webpack')

module.exports = {
  mode:'development',
  entry: {
    app: './src/index.js',
  },
  plugins: [
    new webpack.ProvidePlugin({
      join:['lodash','join']
    })
  ],
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  }
};

TypeScript

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx":"react",
    "allowJs": true,
    "moduleResolution": "node"
  }
}

webpack.config.js

const path = require('path');
const webpack = require('webpack')

module.exports = {
  mode:'development',
  entry: {
    app: './src/index.ts',
  },
  devtool:"inline-source-map",
  module:{
    rules:[
      {
        test:/\.tsx?$/,
        use:'ts-loader',
        exclude:/node_modules/
      }
    ]
  },
  resolve:{
    extensions:['.tsx','.ts','.js']
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  }
};