webpack(11)配置文件分离为开发配置、生成配置和基础配置
前言
上篇我们已经配置好了本地开发服务器,但是配置的相对比较凌乱,一个文件中有些是开发时用到的配置,有些是生成时用到的配置,有些是开发和生成都要用到的配置,所以我们这里把环境分为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
webpack(11)配置文件分离为开发配置、生成配置和基础配置的更多相关文章
- 跟阿根一起学Java Web开发一:开发环境搭建及JSPGen基础配置
JSPGenSDF软件开发框架(于2014年5月5号公布4.0版).简称JSPGen,专用Java Web方面平台式软件开发,整个框架也能够说是前台与后台的一个粘合剂,如今对JSPGenSDF进行开发 ...
- 【linux配置】Redhat6.5基础配置指南
Redhat6.5基础配置指南 本文针对鄙人在工作中常用系统配置加以说明,通常公司用于生产和测试的服务器基本上都不能连接外网,需要针对刚刚安装好的系统做一系列的常用配置. 一.常用基础系统配置 1.关 ...
- 提高开发效率之VS Code基础配置篇
背景 之前一直是只用WebStorm作为IDE来编写代码,但是由于: 手中的这台Mac接了两个显示器以后,使用WebStorm会有卡顿. WebStorm需要付费(虽然可以通过某方法和谐). 所以需要 ...
- .NET开发微信小程序(基础配置)
1.微信小程序的必备Model public class WxConfig { /// <summary> /// 小程序的appId /// 登录小程序可以直接看到 /// </s ...
- Java开发学习(三)----Bean基础配置及其作用范围
一.bean基础配置 对于bean的基础配置如下 <bean id="" class=""/> 其中,bean标签的功能.使用方式以及id和clas ...
- webpack3.x版本实战案例【基础配置篇】(一)
本文旨在通过一个一个实战例子来学习webpack如何配置,更加深入的学习webpack在实战项目中如何配置. 我们学习哪些配置呢? [基础配置] 打包JS 编译ES6 编译typeScript 打包公 ...
- Emacs学习心得之 基础配置
作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 Emacs学习心得之 基础配置 1.前言2.基础配置 一.前言 本篇博文记录了Emacs的一 ...
- SpringMVC常用配置(二),最简洁的配置实现文件上传
Spring.SpringMVC持续介绍中,基础配置前面已经介绍了很多,如果小伙伴们还不熟悉可以参考这几篇文章: 1.Spring基础配置 2.Spring常用配置 3.Spring常用配置(二) 4 ...
- 分离Webpack开发环境与生产环境的配置
这是Webpack+React系列配置过程记录的第五篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
随机推荐
- 10.10 traceroute:追踪数据传输路由状况
traceroute命令 用于显示网络数据包传输到指定主机的路径信息,追踪数据传输路由状况.默认数据包大小是60字节(IPv4)或80字节(IPv6),用户可另行设置.它与Windows下的trace ...
- 第14讲 | HTTP协议:看个新闻原来这么麻烦
第14讲 | HTTP协议:看个新闻原来这么麻烦 http://www.163.com 是个 URL,叫作统一资源定位符. 之所以叫统一,是因为它是有格式的.HTTP 称为协议,www.163.com ...
- 通过git将项目传到github上
lenovo@LAPTOP-3KMEN0B2 MINGW64 /e/Users/lenovo/springboot-project/forum $ ls forum.iml HELP.md mvnw* ...
- Psexec和wmiexec的原理和区别
PSEXEC 针对远程建立连接的方式有两种,一种先建立IPC通道连接,然后直接使用,操作如下: net use \\192.168.0.1\ipc$ "password" /use ...
- [leetcode] 39. 组合总和(Java)(dfs、递归、回溯)
39. 组合总和 直接暴力思路,用dfs+回溯枚举所有可能组合情况.难点在于每个数可取无数次. 我的枚举思路是: 外层枚举答案数组的长度,即枚举解中的数字个数,从1个开始,到target/ min(c ...
- MongoDB学习笔记:文档Crud Shell
MongoDB学习笔记:文档Crud Shell 文档插入 一.插入语法 db.collection.insertOne() 将单个文档插入到集合中.db.collection.insertMan ...
- GO学习-(3) VS Code配置Go语言开发环境
VS Code配置Go语言开发环境 VS Code配置Go语言开发环境 说在前面的话,Go语言是采用UTF8编码的,理论上使用任何文本编辑器都能做Go语言开发.大家可以根据自己的喜好自行选择.编辑器/ ...
- ZooKeeper学习笔记二:API基本使用
Grey ZooKeeper学习笔记二:API基本使用 准备工作 搭建一个zk集群,参考ZooKeeper学习笔记一:集群搭建. 确保项目可以访问集群的每个节点 新建一个基于jdk1.8的maven项 ...
- 用TVM在硬件平台上部署深度学习工作负载的端到端 IR 堆栈
用TVM在硬件平台上部署深度学习工作负载的端到端 IR 堆栈 深度学习已变得无处不在,不可或缺.这场革命的一部分是由可扩展的深度学习系统推动的,如滕索弗洛.MXNet.咖啡和皮托奇.大多数现有系统针对 ...
- CPU的自动调度矩阵乘法
CPU的自动调度矩阵乘法 这是一个有关如何对CPU使用自动调度程序的文档. 与依靠手动模板定义搜索空间的基于模板的autotvm不同,自动调度程序不需要任何模板.用户只需要编写计算声明,而无需任何调度 ...