当前我们的webpack的配置会有一些问题,比如说有一些配置需要在开发环境下使用如:devServe,souremap等,有些需要在生产环境下配置,如每次打包删除原来的包
1,于是我们可以对webpack的配置进行分包,来区分哪个是生产环境使用,哪个开发环境下使用,哪个是公共的,目录结构:
2,然后我们可以在pack.json的script节点下:指定生产和开发环境下webpack.config.js的入口:
3,合并公共配置 : 在生产和开发环境下的webpack.config.js,于公共的webpack配置进行合并 需要借助webpack提供的插件:npm install webpack-merge -D,进行合并。 贴配置:
①webpack.common.config.js:
const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const { DefinePlugin } = require("webpack");
const { VueLoaderPlugin } = require("vue-loader/dist/index");
module.exports = {
target: "web", //配合模块热更新,实现刷新
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "../build"),
filename: "js/bundle.js"
},
//路径解析模块,配置了之后项目中引入时就不再需要给文件加后缀
resolve: {
//项目中引入哪些类型的文件时不用后缀
extensions: [".js", ".json", ".vue", ".ts", ".jsx"],
//配置路径别名,把根目录中的src文件夹配置为@
alias: {
"@": path.resolve(__dirname, "../src")
}
},
module: {
rules: [
{
test: /\.(less||css)$/,
use: ["style-loader", "css-loader", "postcss-loader", "less-loader"]
},
{
test: /\.(jpg|svg|png)$/i,
type: "asset",
generator: {
filename: "img/[name]_[hash:6][ext]"
},
parser: {
dataUrlCondition: {
maxSize: 100 * 1024
}
}
},
{
test: /\.(eot|ttf|woff2?)$/,
type: "asset/resource",
generator: {
filename: "font/[name]_[hash:6][ext]"
}
},
{
test: /\.js$/,
use: ["babel-loader"]
},
{
test: /\.vue$/,
use: ["vue-loader"]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./public/index.html",
title: "模板"
}),
new DefinePlugin({
BASE_URL: "'./'",
//是否支持vue2的optionsAPI
__VUE_OPTIONS_API__: true,
//是否再生产环境支持vue插件
__VUE_PROD_DEVTOOLS__: false
}),
new VueLoaderPlugin()
]
};
②webpack.dev.config.js
//开发环境webpack配置
//导入webpack合并公共配置的插件
const { merge } = require("webpack-merge");
//获取公共的webpack配置
const commonConfig = require("./webpack.common.config");
module.exports = merge(commonConfig, {
mode: "development",
devtool: "source-map",
devServer: {
//当我们的打包后的文件中没有要找的文件,就去./pubilc下去找,只在生产环境有用
// contentBase: "../public",
hot: true,
host: "0.0.0.0",
port: "9527",
compress: true,
proxy: {
//会开启一台本地代理服务器,通过代理服务器请求,服务器之间不会跨域
"/api": {
//请求所去往的地址,请求路径中需要/aip开头才能被代理
target: "http//www.baidu.com:4000",
pathRewrite: {
//匹配以/api开头的请求,把/api重写为""
"^/api": ""
},
//如果要代理https请求
secure: true,
//把本地的源改为目标url的源
changeOrigin: true
}
}
}
});
③webpack.prod.config.js中
//打包时把icon移动到打包后的文件夹
const CopyWebpackPlugin = require("copy-webpack-plugin");
//每次打包清理上次打包的文件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
//导入webpack合并公共配置的插件
const { merge } = require("webpack-merge");
//获取公共的webpack配置
const commonConfig = require("./webpack.common.config");
module.exports = merge(commonConfig, {
mode: "production",
plugins: [
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
patterns: [
{
from: "./public",
globOptions: {
ignore: ["**/index.html"]
}
}
]
})
]
});
此时根目录中的webpack.config.js就可以删除了