webpack-merge 对配置文件进行合并
npm i webpack-merge --save-dev
分离
原webpack.config.js
const path = require('path')
const webpack = require('webpack')
const vueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const uglifyjsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry:'./src/main.js',
output:{
path:path.join(__dirname,'dist'),
filename:'build.js'
},
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
resolve:{
extensions:['.js','.vue','.css'],
alias:{
'vue$':'vue/dist/vue.esm.js'
}
},
devServer:{
contentBase:'/dist',
inline:true
},
plugins: [
new webpack.BannerPlugin('最终版权归 xxx---xxx--xxx 所有!'),
new HtmlWebpackPlugin({
template:'index.html'
}),
new vueLoaderPlugin(),
new uglifyjsPlugin()
]
}
分离目录
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/4cc9ddd4335107db518c821a57601216.png#pic_center)
build/base.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const vueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
entry:'./src/main.js',
output:{
path:path.join(__dirname,'../dist'),
filename:'build.js'
},
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
resolve:{
extensions:['.js','.vue','.css'],
alias:{
'vue$':'vue/dist/vue.esm.js'
}
},
plugins:[
new HtmlWebpackPlugin({
template:'index.html'
}),
new vueLoaderPlugin()
]
}
build/prod.config.js
const uglifyjsPlugin = require('uglifyjs-webpack-plugin');
const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config');
module.exports = webpackMerge.merge(baseConfig,{
plugins: [
new uglifyjsPlugin()
]
})
build/dev.config.js
const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config');
module.exports = webpackMerge.merge(baseConfig,{
devServer:{
contentBase:'../dist',
inline:true
},
})
package.json 指定运行文件
"scripts": {
"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --open"
},
打包或者运行
npm run build
npm run dev