npm install webpack-merge -D
build目录下:
base.config.js
const path=require("path")
const { VueLoaderPlugin } = require("vue-loader")
const HtmlWebpackPlugin=require("html-webpack-plugin")
module.exports={
entry : './src/main.js',
output : {
path : path.resolve(__dirname,"../dist"),
filename : 'bundle.js',
assetmodulefilename : 'images/[name]-[hash:8][ext][query]'
},
module : {
rules : [
{
test : /\.css$/,
use : [
"style-loader",
"css-loader",
]
},
{
test : /\.scss$/,
use : [
{
loader:"style-loader"
},{
loader : "css-loader",
},
{
loader : "sass-loader"
}
]
},
{
test : /\.(jpg|png|gif)$/,
type : 'asset/resource'
},
{
test : /\.m?js$/,
exclude : /(node_modules|bower_components)/,
use : {
loader : 'babel-loader',
options : {
presets : ["@babel/preset-env"]
}
}
},
{
test : /\.vue$/,
use : ["vue-loader"]
}
]
},
plugins : [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template :'index.html'
})
],
resolve : {
extensions : [".js",".css",".vue"],
alias : {
//编译运行时均解析template
"vue$" : "vue/dist/vue.esm.js"
}
},
}
pro.config.js
const webpack=require("webpack")
const WebpackMerge=require("webpack-merge")
const baseConfig=require('./base.config')
module.exports=WebpackMerge.merge(baseConfig,{
plugins : [
new webpack.BannerPlugin("版权归ywxk所有"),
],
})
dev.config.js
const WebpackMerge=require('webpack-merge')
const baseConfig=require('./base.config')
module.exports=WebpackMerge.merge(baseConfig,{
mode : "development",
devServer : {
static : './dist',
open : true,
}
})
package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config ./build/pro.config.js",
"dev": "webpack-dev-server --config ./build/dev.config.js"
},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。