webpack的配置文件需要分线上环境与开发环境。
- 开发环境需要方便开发者对代码进行调试。
- 线上环境需要对代码进行压缩，对sourcemap进行精简。
首先，先将原有的webpack.config.js拆分成
开发用配置:webpack.dev.js,
线上用配置:webpack.prod.js
以下分别是配置文件与界面：
开发模式下：
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack')
const {
CleanWebpackPlugin
} = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
main: './src/index.js',
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'dist'),
open: true,
port: 9000,
hot: true,
// hotOnly: true
},
module: {
rules: [{
test: /\.jsx$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
test: /\.jpg$/,
use: [{
//placeholder
loader: 'url-loader',
options: {
name: '[name].[ext]',
outputPath: 'images',
limit: 8192 //limit to 8kb
}
}]
},
{
test: /\.(eot|woff2|woff|ttf|svg)$/,
use: [{
//placeholder
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts',
}
}]
},
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
// 0 => no loaders (default);
// 1 => postcss-loader;
// 2 => postcss-loader, sass-loader,
//modules: true
}
},
'sass-loader',
'postcss-loader'
]
}
]
},
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
optimization: {
usedExports: true
},
plugins: [new HtmlWebpackPlugin({
template: 'src/index.html'
}), new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: ['bundle']
}), new webpack.HotModuleReplacementPlugin()]
}
image.png
生产模式下：
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
CleanWebpackPlugin
} = require('clean-webpack-plugin');
module.exports = {
mode: 'production',
entry: {
main: './src/index.js',
},
devtool: 'cheap-module-source-map',
module: {
rules: [{
test: /\.jsx$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
test: /\.jpg$/,
use: [{
//placeholder
loader: 'url-loader',
options: {
name: '[name].[ext]',
outputPath: 'images',
limit: 8192 //limit to 8kb
}
}]
},
{
test: /\.(eot|woff2|woff|ttf|svg)$/,
use: [{
//placeholder
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts',
}
}]
},
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
// 0 => no loaders (default);
// 1 => postcss-loader;
// 2 => postcss-loader, sass-loader,
//modules: true
}
},
'sass-loader',
'postcss-loader'
]
}
]
},
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
plugins: [new HtmlWebpackPlugin({
template: 'src/index.html'
}), new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: ['bundle']
})]
}
压缩后的production代码如下:
image.png
虽然将webpack的配置文件拆成了两份，但是两份文件中有大量相同的冗余代码。
可以将相同的代码作为一份template,然后根据环境的不同，合并成不同环境下的配置文件。
需要使用webpack-merge对webpack的配置文件进行合并。
安装：npm install webpack-merge -S
提取webpack.common.js的代码：
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
CleanWebpackPlugin
} = require('clean-webpack-plugin');
var merge = require('webpack-merge');
module.exports = {
entry: {
main: './src/index.js',
},
module: {
rules: [{
test: /\.jsx$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
test: /\.jpg$/,
use: [{
//placeholder
loader: 'url-loader',
options: {
name: '[name].[ext]',
outputPath: 'images',
limit: 8192 //limit to 8kb
}
}]
},
{
test: /\.(eot|woff2|woff|ttf|svg)$/,
use: [{
//placeholder
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts',
}
}]
},
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
// 0 => no loaders (default);
// 1 => postcss-loader;
// 2 => postcss-loader, sass-loader,
//modules: true
}
},
'sass-loader',
'postcss-loader'
]
}
]
},
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
plugins: [new HtmlWebpackPlugin({
template: 'src/index.html'
}), new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: ['bundle']
})]
}
webpack.dev.js
思想就是将common的配置提取，然后与dev配置合并后导出。
const webpack = require('webpack')
const path = require('path')
const merge = require('webpack-merge');
const common = require('./webpack.common')
const config = {
mode: 'development',
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'dist'),
open: true,
port: 9000,
hot: true,
// hotOnly: true
},
optimization: {
usedExports: true
},
plugins: [new webpack.HotModuleReplacementPlugin()]
}
module.exports = merge(config, common)
webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.common')
const config = {
mode: 'production',
entry: {
main: './src/index.js',
},
devtool: 'cheap-module-source-map',
}
module.exports = merge(config, common)
