webpack-merge 扩展配置文件
配置文件对比：
webpack.coonfig.js
const path = require('path');
const isDev = process.env.NODE_ENV === 'development';
const HTMLPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const ExtractPlugin = require('extract-text-webpack-plugin'); //把非js代码打包成单独的资源文件，提高效率
const webpack = require('webpack');
const config = {
target: 'web',
entry: path.join(__dirname, 'src/index.js'), //__dirname 当前文件所在的目录地址
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.jsx$/,
loader: 'babel-loader',
},
{
test: /\.(gif|jpg|jpeg|png|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name]-aaa.[ext]',
},
},
],
},
],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: isDev ? '"development"' : '"production"',
},
}),
new VueLoaderPlugin(),
new HTMLPlugin(),
],
mode: 'development',
};
//判断开发环境和正式环境 cross-env 运行跨平台设置和用环境变量的脚本
if (isDev) {
config.module.rules.push({
test: /\.styl/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true,
},
},
'stylus-loader',
],
});
config.devtool = '#cheap-module-eval-source-map';
config.devServer = {
port: 8000,
host: '0.0.0.0',
overlay: {
errors: true,
},
hot: true,
// open: true
};
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
);
} else {
//正式环境
// config.enter={
// app:path.join(__dirname,'src/index.js'),
// vender:['vue']//可以添加相关的第三方库
// }
config.output.filename = '[name].[chunkhash:8].js';
config.module.rules.push({
test: /\.styl/,
use: ExtractPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true,
},
},
'stylus-loader',
],
}),
});
config.plugins.push(
new ExtractPlugin('styles.[contentHash:hex:8].css'),
// new webpack.optimize.CommonsChunkPlugin({
// name:'vendor'
// })
);
config.optimization={
splitChunks:{
cacheGroups:{
commons:{
name:'vender',
}
}
},
runtimeChunk:true
}
}
module.exports = config;
修改后，配置文件位于build下：
webpack.config.base.js //公共配置,基础配置
const path = require('path');
const config = {
target: 'web',
entry: path.join(__dirname, '../src/index.js'), //__dirname 当前文件所在的目录地址 注意这里的路径有修改
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
exclude:/node_modules/ //node_modules中的.vue文件不需要编译
},
{
test: /\.jsx$/,
loader: 'babel-loader',
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude:__dirname+'node_modules',
include:__dirname+'src',
options: {
presets: ['env']
},
},
{
test: /\.(gif|jpg|jpeg|png|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1024,
name: 'resources/[path][name].[hash:8].[ext]',
},
},
],
},
],
}
};
module.exports = config;
webpack.config.client.js
const path = require('path');
const isDev = process.env.NODE_ENV === 'development';
const HTMLPlugin = require('html-webpack-plugin');
const ExtractPlugin = require('extract-text-webpack-plugin'); //把非js代码打包成单独的资源文件，提高效率
const webpack = require('webpack');
const merge=require('webpack-merge');
const baseConfig=require('./webpack.config.base');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
//判断开发环境和正式环境 cross-env 运行跨平台设置和用环境变量的脚本
const defaultPlugins=[
new webpack.DefinePlugin({
'process.env':{
NODE_ENV:isDev?'"development"':'"production"'
}
}),
new VueLoaderPlugin(),
new HTMLPlugin(),
]
const devServer={
port: 8000,
host: '0.0.0.0',
overlay: {
errors: true,
},
hot: true,
// open: true
}
let config
if (isDev) {
//第二个参数——对象会对第一个参数进行覆盖和补充
config=merge(baseConfig,{
module:{
rules:[{
test: /\.styl/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true,
},
},
'stylus-loader',
],
}]
},
devtool:'#cheap-module-eval-source-map',
devServer,
plugins:defaultPlugins.concat([
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
])
})
} else {
//正式环境
config=merge(baseConfig,{
enter:{
app:path.join(__dirname,'../src/index.js'),
vendor:['vue']
},
output:{
filename:'[name].[chunkhash:8].js'
},
module:{
rules:[
{
test: /\.styl/,
use: ExtractPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true,
},
},
'stylus-loader',
],
}),
}
]
},
plugins:defaultPlugins.concat([
new ExtractPlugin('styles.[contentHash:hex:8].css'),
]),
optimization:{
splitChunks:{
cacheGroups:{
commons:{
name:'vendor',
}
}
},
runtimeChunk:true
}
})
}
module.exports = config;
package.json也需要进行相应的修改：
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.client.js","dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js" },