webpack.common.js ~~~ const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const { srcPath, distPath } = require('./paths') module.exports = { entry: { index: path.join(srcPath, 'index.js'), other: path.join(srcPath, 'other.js') }, module: { rules: [ { test: /\.js$/, loader: ['babel-loader'], include: srcPath, exclude: /node_modules/ }, // { // test: /\.css$/, // // loader 的执行顺序是：从后往前 // loader: ['style-loader', 'css-loader'] // }, { test: /\.css$/, // loader 的执行顺序是：从后往前 loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss }, { test: /\.less$/, // 增加 'less-loader' ，注意顺序 loader: ['style-loader', 'css-loader', 'less-loader'] } ] }, plugins: [ // new HtmlWebpackPlugin({ // template: path.join(srcPath, 'index.html'), // filename: 'index.html' // }) // 多入口 - 生成 index.html new HtmlWebpackPlugin({ template: path.join(srcPath, 'index.html'), filename: 'index.html', // chunks 表示该页面要引用哪些 chunk （即上面的 index 和 other），默认全部引用 chunks: ['index'] // 只引用 index.js }), // 多入口 - 生成 other.html new HtmlWebpackPlugin({ template: path.join(srcPath, 'other.html'), filename: 'other.html', chunks: ['other'] // 只引用 other.js }) ] } ~~~ webpack.dev.js ~~~ const path = require('path') const webpack = require('webpack') const webpackCommonConf = require('./webpack.common.js') const { smart } = require('webpack-merge') const { srcPath, distPath } = require('./paths') module.exports = smart(webpackCommonConf, { mode: 'development', module: { rules: [ // 直接引入图片 url { test: /\.(png|jpg|jpeg|gif)$/, use: 'file-loader' } ] }, plugins: [ new webpack.DefinePlugin({ // window.ENV = 'production' ENV: JSON.stringify('development') }) ], devServer: { port: 8080, progress: true, // 显示打包的进度条 contentBase: distPath, // 根目录 open: true, // 自动打开浏览器 compress: true, // 启动 gzip 压缩 // 设置代理 proxy: { // 将本地 /api/xxx 代理到 localhost:3000/api/xxx '/api': 'http://localhost:3000', // 将本地 /api2/xxx 代理到 localhost:3000/xxx '/api2': { target: 'http://localhost:3000', pathRewrite: { '/api2': '' } } } } }) ~~~ webpack.prod.js ~~~ const path = require('path') const webpack = require('webpack') const { CleanWebpackPlugin } = require('clean-webpack-plugin') const webpackCommonConf = require('./webpack.common.js') const { smart } = require('webpack-merge') const { srcPath, distPath } = require('./paths') module.exports = smart(webpackCommonConf, { mode: 'production', output: { // filename: 'bundle.[contentHash:8].js', // 打包代码时，加上 hash 戳 filename: '[name].[contentHash:8].js', // name 即多入口时 entry 的 key path: distPath, // publicPath: 'http://cdn.abc.com' // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到 }, module: { rules: [ // 图片 - 考虑 base64 编码的情况 { test: /\.(png|jpg|jpeg|gif)$/, use: { loader: 'url-loader', options: { // 小于 5kb 的图片用 base64 格式产出 // 否则，依然延用 file-loader 的形式，产出 url 格式 limit: 5 * 1024, // 打包到 img 目录下 outputPath: '/img1/', // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源） // publicPath: 'http://cdn.abc.com' } } }, ] }, plugins: [ new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹 new webpack.DefinePlugin({ // window.ENV = 'production' ENV: JSON.stringify('production') }) ] }) ~~~