参看：文档地点

视频地点：https://www.bilibili.com/video/av51693431

webpack的感化：代码转换、文件优化、代码支解、模块打点、自动刷新、代码查验、自动颁布

2 webpack 常见配置 2.1 安置

npm init -y cnpm i webpack webpack-cli -D # 版本 # "webpack": "^4.41.4" # "webpack-cli": "^3.3.10" # webpack 打包命令 npx webpack

2.2 配置

// webpack.config.js const path = require(‘path‘) module.exports = { mode: ‘development‘, // development production(该模式下回自动压缩代码) entry: path.join(__dirname, ‘./src/index.js‘), output: { filename: ‘bundle.[hash:8].js‘, path: path.join(__dirname, ‘./build‘), } }

2.2.1 自界说打包配置文件

// webpack.config.xxx.js module.exports = { // ... } // 执行命令 // npx webpack --config webpack.config.xxx.js

2.2.2 配置脚本

{
"scripts": { "dev": "webpack-dev-server --config webpack.config.js --colors", "build": "webpack --config webpack.config.js --colors" } }

2.3 常用插件

webpack-dev-server

cnpm i webpack-dev-server -D

devServer: { port: 8081, progress: true, // 进度条 contentBase: ‘./build‘, // 指定 build 文件夹作为静态处事 compress: true // 压缩文件 }

html-webpack-plugin - 打包 html 页面：

cnpm i html-webpack-plugin -D

const HtmlWebpackPlugin = require(‘html-webpack-plugin‘) module.exports = { // ... plugins: [ new HtmlWebpackPlugin({ template: ‘./src/index.html‘, filename: ‘index.html‘, minify: { removeAttributeQuotes: true, // 删除双引号 collapseWhitespace: true // 折叠空行 }, hash: true // 添加 hash 戳 }) ] // ... }

css less loader 配置

cnpm i css-loader less less-loader mini-css-extract-plugin postcss-loader style-loader url-loader -D

const MiniCssExtractPlugin = require("mini-css-extract-plugin") module.exports = { // ... plugins: [ new MiniCssExtractPlugin({ filename: path.posix.join(‘static‘, ‘css/[name].[contenthash].css‘), // disable: false, //是否禁用此插件 // allChunks: true, // publicPath: ‘‘, options: { insert: ‘head‘ } }) ], module: { rules: [ { // css test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { // localIdentName:‘[name]-[local]-[hash:base64:6]‘, publicPath: ‘../../‘ } }, { loader: ‘css-loader‘, options: { url: true, modules: {} } }, ‘postcss-loader‘ ] }, { // less test: /\.less$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: ‘../../‘ } }, { loader: ‘css-loader‘, options: {} }, ‘less-loader‘, ‘postcss-loader‘ ] }, ] } // ... }

postcss.config.js

module.exports = { plugins: { ‘autoprefixer‘: { overrideBrowserslist: ‘last 5 version‘ } } }

postcss-loader 共同autoprefixer给样式加前缀。

打包 JS CSS 压缩优化：

const OptimizeCSSAssetsPlugin = require(‘optimize-css-assets-webpack-plugin‘) // 用于优化\最小化CSS const TerserJSPlugin = require(‘terser-webpack-plugin‘) // js 压缩 module.exports = { // ... optimization: { minimize: true, minimizer: [ new TerserJSPlugin({ cache: true, // 是否缓存 parallel: true, // 并发打包 sourceMap: true, }), new OptimizeCSSAssetsPlugin({ cssProcessorPluginOptions: { preset: [‘default‘, { discardComments: { removeAll: true } }], }, cssProcessorOptions: { safe: true } }) ] }, // ... }

2.4 ES6 语法转换

cnpm i @babel/preset-env @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime -D

cnpm i @babel/runtime -S

@babel/polyfill 已弃用，参看：[email protected]带来的惊喜、