// webpack 中 source map 的可选项，是情况选择一种： // devtool: 'source-map' // 1. 生成独立的 source map 文件 // devtool: 'eval-source-map' // 2. 同 1 ，但不会产生独立的文件，集成到打包出来的 js 文件中 // devtool: 'cheap-module-source-map' // 3. 生成单独的 source map 文件，但没有列信息（因此文件体积较小） devtool: 'cheap-module-eval-source-map' // 4. 同 3 ，但不会产生独立的文件，集成到打包出来的 js 文件中
生产环境下推荐使用 1 或者 3 ，即生成独立的 map 文件。修改之后，重新运行 npm run build ，会看到打包出来了 map 文件。
处理样式
在 webpack 看来，不仅仅是 js ，其他的文件也是一个一个的模块，通过相应的 loader 进行解析并最终产出。
处理 css
安装必要插件 npm i style-loader css-loader -D ，然后配置 build/webpack.common.js
module: { rules: [ { /* js loader */ }, { test: /\.css$/, loader: ['style-loader', 'css-loader'] // loader 的执行顺序是：从后往前 } ] },
新建一个 css 文件，然后引入到 src/index.js 中 import './css/index.css' ，重新运行 npm run dev 即可看到效果。
处理 less
less sass 都是常用 css 预处理语言，以 less 为例讲解。安装必要插件 npm i less less-loader -D ，然后配置 build/webpack.common.js
{ test: /\.less$/, loader: ['style-loader', 'css-loader', 'less-loader'] // 增加 'less-loader' ，注意顺序 }
新建一个 less 文件，然后引入到 src/index.js 中 import './css/index.less' ，重新运行 npm run dev 即可看到效果。
自动添加前缀
一些 css3 的语法，例如 transform: rotate(45deg); 为了浏览器兼容性需要加一些前缀，如 webkit- ，可以通过 webpack 来自动添加。安装 npm i postcss-loader autoprefixer -D ，然后配置
{ test: /\.css$/, loader: ['style-loader', 'css-loader', 'postcss-loader'] // 增加 'postcss-loader' ， 注意顺序 }
还要新建一个 postcss.config.js 文件，内容是
module.exports = { plugins: [require('autoprefixer')] }
重新运行 npm run dev 即可看到效果，自动增加了必要的前缀。
抽离 css 文件
默认情况下，webpack 会将 css 代码全部写入到 html 的 <style> 标签中，但是打包代码时需要抽离到单独的 css 文件中。安装 npm i mini-css-extract-plugin -D 然后配置 build/webpack.prod.js（打包代码时才需要，运行时不需要）
// 引入插件 const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 增加 webpack 配置 module: { rules: [ { test: /\.css$/, loader: [ MiniCssExtractPlugin.loader, // 注意，这里不再用 style-loader 'css-loader', 'postcss-loader' ] } ] }, plugins: [ new MiniCssExtractPlugin({ filename: 'css/main.[contentHash:8].css' }) ]
如需要压缩 css ，需要安装 npm i terser-webpack-plugin optimize-css-assets-webpack-plugin -D ，然后增加配置
// 引入插件 const TerserJSPlugin = require('terser-webpack-plugin') const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin') // 增加 webpack 配置 optimization: { minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})], },
运行 npm run build 即可看到打包出来的 css 是独立的文件，并且是被压缩过的。
处理图片
要在 js 中 import 图片，或者在 css 中设置背景图片。安装 npm i file-loader -D 然后配置 build/webpack.common.js
{ test: /\.(png|jpg|gif)$/, use: 'file-loader' }
如果想要处理 html 代码中 <img src="https://www.jb51.net/article/..."/> 的形式，则安装 npm i html-withimg-loader -D 然后配置 build/webpack.common.js
{ test: /\.html$/, use: 'html-withimg-loader' }
打包之后，dist 目录下会生成一个类似 917bb63ba2e14fc4aa4170a8a702d9f8.jpg 的文件，并被引入到打包出来的结果中。
如果想要将小图片用 base64 格式产出，则安装 npm i url-loader -D ，然后配置 build/webpack.common.js
{ test: /\.(png|jpg|gif)$/, use: { loader: 'url-loader', options: { // 小于 5kb 的图片用 base64 格式产出 // 否则，依然延用 file-loader 的形式，产出 url 格式 limit: 5 * 1024, // 打包到 img 目录下 outputPath: '/img/', // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源） // publicPath: 'http://cdn.abc.com' } } },
多页应用
src 下有 index.js index.html 和 other.js other.html ，要打包输出两个页面，且分别引用各自的 js 文件。
第一，配置输入输出