webpack学习之5.环境配置

本文主要是介绍webpack学习之5.环境配置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

环境

项目一般要配置两个环境：
开发环境 development ：配置侧重于实时重载、模块热替换HMR、便捷的source map等，在本地搭建服务器运行。
生产环境 production ：配置侧重于文件压缩、轻量的source map、其他发布配置等，打包上传到服务器运行。

遵循逻辑分离，通常建议为每个环境编辑彼此独立的webpack配置。
遵循不重复原则，我们还要保留一个“通用”的配置。

可以使用webpack-merge将通用配置和独立配置合并。

单独配置

首先创建两个环境的配置文件，并分别配置：

// 开发环境
// ./config/webpack.dev.js
const path = require('path');
// 加载插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const hotMiddlewareScript = 'webpack-hot-middleware/client?quiet=true'; // &reload=true 未使用accept重载的，使用reload重载
const HtmlWebpackPlugin = require('html-webpack-plugin');function joinPath(filepath) {return path.join(__dirname, filepath);
}module.exports = {mode: 'development',devtool: 'cheap-module-eval-source-map',entry: {main: [hotMiddlewareScript, joinPath('../src/index.js')],util: [hotMiddlewareScript, joinPath('../src/util.js')]},output: {path: joinPath('../dist'),filename: '[name].js?v=[hash]', // HMR不能使用chunkhash和contenthashchunkFilename: '[id].js?v=[hash]' // HMR不能使用chunkhash和contenthash},module: {rules: [{test: /\.css$/, // 根据正则匹配.css结尾的文件use: [ // 配置loader，倒序使用{loader: MiniCssExtractPlugin.loader,options: {hmr: true}},{ loader: 'css-loader' }]}]},optimization: {splitChunks: {chunks: 'all'}},plugins: [new HtmlWebpackPlugin(),// 用 MiniCssExtractPlugin 抽离出 css 文件new MiniCssExtractPlugin({filename: '[name].css?v=[chunkhash]' // name为entry定义的入口名:main}),new webpack.HotModuleReplacementPlugin()],
}

// 生产环境
// ./config/webpack.prod.js
const path = require('path');
// 加载插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');function joinPath(filepath) {return path.join(__dirname, filepath);
}module.exports = {mode: 'production',devtool: 'cheap-module-source-map',entry: {main: [joinPath('../src/index.js')],util: [joinPath('../src/util.js')]},output: {path: joinPath('../dist'),filename: '[name].js?v=[chunkhash]',chunkFilename: '[id].js?v=[chunkhash]'},module: {rules: [{test: /\.css$/, // 根据正则匹配.css结尾的文件use: [ // 配置loader，倒序使用{ loader: MiniCssExtractPlugin.loader },{ loader: 'css-loader' }]}]},optimization: {splitChunks: {chunks: 'all'}},plugins: [new HtmlWebpackPlugin(),new CleanWebpackPlugin(),// 用 MiniCssExtractPlugin 抽离出 css 文件new MiniCssExtractPlugin({filename: '[name].css?v=[chunkhash]' // name为entry定义的入口名:main}),],
}

配置脚本和服务器

// package.json
{"scripts": {"build": "webpack --progress --config ./config/webpack.prod.js","server": "node server.js"},"devDependencies": {"clean-webpack-plugin": "^3.0.0","css-loader": "^3.5.3","express": "^4.17.1","html-webpack-plugin": "^4.3.0","mini-css-extract-plugin": "^0.9.0","style-loader": "^1.2.0","webpack": "^4.43.0","webpack-cli": "^3.3.11","webpack-dev-middleware": "^3.7.2","webpack-hot-middleware": "^2.25.0","webpack-merge": "^4.2.2"}// ...
}

// server.js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware')const app = express();// 控制面板\系统和安全\系统\高级系统设置\环境变量 设置一个环境变量NODE_ENV
// 设置完最好重启一下命令行或开发工具
if (process.env.NODE_ENV == 'development') { // 开发环境使用HMRconst config = require('./config/webpack.dev.js');const compiler = webpack(config);app.use(webpackDevMiddleware(compiler));app.use(webpackHotMiddleware(compiler));
}app.use(express.static('dist'))// 在8080端口运行文件
app.listen(8080, function () {console.log('Example app listening on port 8080!\n');
});

合并配置

创建webpack.base.js放置通用配置

// ./config/webpack.dev.js
const path = require('path');
// 加载插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {output: {path: path.join(__dirname, '../dist'),},module: {rules: [{test: /\.css$/, // 根据正则匹配.css结尾的文件use: [ // 配置loader，倒序使用{loader: MiniCssExtractPlugin.loader,options: {hmr: true}},{ loader: 'css-loader' }]}]},optimization: {splitChunks: {chunks: 'all'}},plugins: [new HtmlWebpackPlugin(),// 用 MiniCssExtractPlugin 抽离出 css 文件new MiniCssExtractPlugin({filename: '[name].css?v=[chunkhash]' // name为entry定义的入口名:main})],
}

调整dev和prod

// ./config/webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.base.js');const path = require('path');
// 加载插件
const webpack = require('webpack');
const hotMiddlewareScript = 'webpack-hot-middleware/client?quiet=true'; // &reload=true 未使用accept重载的，使用reload重载function joinPath(filepath) {return path.join(__dirname, filepath);
}module.exports = merge(common, {mode: 'development',devtool: 'cheap-module-eval-source-map',entry: {main: [hotMiddlewareScript, joinPath('../src/index.js')],util: [hotMiddlewareScript, joinPath('../src/util.js')]},output: {filename: '[name].js?v=[hash]', // HMR不能使用chunkhash和contenthashchunkFilename: '[id].js?v=[hash]' // HMR不能使用chunkhash和contenthash},plugins: [new webpack.HotModuleReplacementPlugin()]
});

// ./config/webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.base.js');const path = require('path');
// 加载插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');function joinPath(filepath) {return path.join(__dirname, filepath);
}module.exports = merge(common, {mode: 'production',devtool: 'cheap-module-source-map',entry: {main: [joinPath('../src/index.js')],util: [joinPath('../src/util.js')]},output: {filename: '[name].js?v=[chunkhash]',chunkFilename: '[id].js?v=[chunkhash]'},plugins: [new CleanWebpackPlugin(),],
});