大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
前言
上篇我们已经配置好了本地开发服务器,但是配置的相对比较凌乱,一个文件中有些是开发时用到的配置,有些是生成时用到的配置,有些是开发和生成都要用到的配置,所以我们这里把环境分为3个环境
- webpack.base.config.js:
webpack
基础配置,开发和生成环境都需要用到的配置 - webpack.dev.config.js:开发环境的配置
- webpack.prod.config.js:生成环境的配置
配置分离
development
(开发环境) 和 production
(生产环境) 这两个环境下的构建目标存在着巨大差异。在开发环境中,我们需要:强大的 source map
和一个有着 live reloading
(实时重新加载) 或 hot module replacement
(热模块替换) 能力的 localhost serve
r。而生产环境目标则转移至其他方面,关注点在于压缩 bundle
、更轻量的 source map
、资源优化等,通过这些优化方式改善加载时间。由于要遵循逻辑分离,我们通常建议为每个环境编写彼此独立的 webpack
配置。
虽然,以上我们将 生产环境 和 开发环境 做了细微区分,但是,请注意,我们还是会遵循不重复原则(Don't repeat yourself - DRY
),保留一个 "common(通用)"
配置。为了将这些配置合并在一起,我们将使用一个名为 webpack-merge
的工具。此工具会引用 "common"
配置,因此我们不必再在环境特定(environment-specific
)的配置中编写重复代码。
我们先从安装 webpack-merge
开始,并将之前已经成型的那些代码进行分离:
npm install -D webpack-merge
安装完成以后,我们看下项目结构,我们新建一个build
目录,然后再创建3个js文件,webpack.base.config.js
、webpack.dev.config.js
、webpack.prod.config.js
webpack.base.config.js
配置如下:
const { VueLoaderPlugin } = require('vue-loader')
const path = require('path')
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'bundle.js',
// publicPath: "dist/"
},
resolve: {
extensions: ['.json', '.js', '.vue', '.css'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
},
},
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.less$/,
use: [
'vue-style-loader',
'css-loader',
'less-loader'
]
},
{
test: /\.png/,
type: 'asset'
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
],
},
plugins: [
// 请确保引入这个插件!
new VueLoaderPlugin(),
new webpack.BannerPlugin("最终版权归jkc所有"),
new HtmlWebpackPlugin({ template: 'index.html' }),
]
}
webpack.dev.config.js
配置如下:
const { merge } = require('webpack-merge');
const common = require('./webpack.base.config.js');
module.exports = merge(common, {
mode: 'development',
devServer: {
contentBase: "./dist",
inline: true
},
})
webpack.prod.config.js
配置如下:
const { merge } = require('webpack-merge');
const common = require('./webpack.base.config.js');
module.exports = merge(common, {
mode: 'production',
});
最后一步我们只需要把package.json
文件中的scripts
的脚本命令改成如下即可:
"scripts": {
"build": "webpack --config ./build/webpack.prod.config.js", // 生成环境打包
"dev": "webpack serve --open --config ./build/webpack.dev.config.js" // 本地开发环境
},
如果我们正在处于开发阶段,就在终端执行npm run dev
如果我们已经开发完成,就在终端执行npm run build
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/166086.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...