Webpack

版本

• Webpack 5

  • 重大变更：功能清除

  • 重大变更：长期缓存

  • 重大变更：支持崭新的 Web 平台特性

  • 重大变更：支持全新的 Node.js 生态特性

  • 重大变更：开发体验

  • 重大变更: 构建优化

  • 重大变更：性能优化

  • 重大变更：长期未解决的问题

  • 重大变更：未来计划

  • 重大内部变更

Skills tree

自动清理构建目录产物：

PostCSS 插件 autoprefixer 自动补齐 CSS3 前缀

移动端 px 自动转 rem

静态资源内联

多页面应用打包通用方案

动态获取 entry 和设置 html-webpack-plugin 数量

• 利用 glob.sync

entry: blog.sync(path.join(__dirname, './src/*/index.js'));

• webpack config entry

const {entry, htmlWebpackPlugins} = setMPA('./src/*/index.js', /src\/(.*)\/index\.js/);

// 1. set entry with above entry
// 2. concat htmlWebpackPlugins with above htmlWebpackPlugins
// 3. note: related .html

scripts

{
  "scripts": {
    "build": "webpack --mode production"
  }
}

Entry

module.exports = {
  entry: './src/index.js' 
}
// ===
module.exports = {
  entry: {
    main: './src/index.js'
  }
}

// 或者配置多个入口
module.exports = {
  entry: {
    foo: './src/page-foo.js',
    bar: './src/page-bar.js', 
    // ...
  }
}
// 使用数组来对多个文件进行打包
module.exports = {
  entry: {
    main: [
      './src/foo.js',
      './src/bar.js'
    ]
  }
}

Loader

module.exports = {
	// ...
	module: {
		// ...
		rules: [
			{
				test: /\.jsx?/, // 匹配文件路径的正则表达式，通常我们都是匹配文件类型后缀
				include: [
					path.resolve(__dirname, 'src') // 指定哪些路径下的文件需要经过 loader 处理
				],
				use: 'babel-loader', // 指定使用的 loader
			},
		]
	}
}

Plugin

const UglifyPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  plugins: [
    new UglifyPlugin()
  ],
}

Output

module.exports = {
  // ...
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
}

// 或者多个入口生成不同文件
module.exports = {
  entry: {
    foo: './src/foo.js',
    bar: './src/bar.js',
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist',
  },
}
// 路径中使用 hash，每次构建时会有一个不同 hash 值，避免发布新版本时线上使用浏览器缓存
module.exports = {
  // ...
  output: {
    filename: '[name].js',
    path: __dirname + '/dist/[hash]',
  },
}

Simple Webpack.config.js

const path = require('path')
const UglifyPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  entry: './src/index.js',

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

  module: {
    rules: [
      {
        test: /\.jsx?/,
        include: [
          path.resolve(__dirname, 'src')
        ],
        use: 'babel-loader',
      },
    ],
  },

  // 代码模块路径解析的配置
  resolve: {
    modules: [
      "node_modules",
      path.resolve(__dirname, 'src')
    ],

    extensions: [".wasm", ".mjs", ".js", ".json", ".jsx"],
  },

  plugins: [
    new UglifyPlugin(), 
    // 使用 uglifyjs-webpack-plugin 来压缩 JS 代码
    // 如果你留意了我们一开始直接使用 webpack 构建的结果，你会发现默认已经使用了 JS 代码压缩的插件
    // 这其实也是我们命令中的 --mode production 的效果，后续的小节会介绍 webpack 的 mode 参数
  ],
}