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') }) ] }) ~~~