Webpack4 学习笔记八 开发环境和生产环境配置
- webpack resolve属性
- webpack 区分开发环境和生产环境
webpack resolve属性
该选项的作用是设置模块如何被解析。
resolve.alias: 设置别名, 在vue中都是 @代表src目录。 也可以在key尾部添加$,精确匹配某一文件
resolve.enforceExtension: 引入的模块文件后面要不要带扩展名, true:一定要带, 默认为 false
import foo from './foo' // ./foo.js 中的.js可以省略
resolve.extensions: 自动解析确认的扩展,默认值为:
extensions: ['.js', '.json']
resolve.mainFiles: 当你引入路径只精确到一个文件夹时, 引入文件夹中的哪个.js文件, 默认为: index
mainFiles: ['index']
了解更多>> 前往 webpack官网
webpac配置:
module.exports = {
resolve: {
alias: path.resolve(__dirname, 'src'),
main$: path.resolve(__dirname, 'src/main.js')
},
enforceExtension: false,
extensions: ['.js', '.json', '.css', 'scss'],
mainFiles: ['index']
}
webpack 区分开发环境和生产环境
有时候需要根据不同的环境进行打包,输出不同的配置。在生产环境中希望可以在控制台打印日志, 而到开发环境将不打印。
在开发环境中可以启用 devServer,通过proxy代理到后端服务器。 到生成环境要直接连后端的真实服务器地址等等
公用配置文件:
webpack-mergn + 开发配置 = 开发总配置
webpack-mergn + 生产配置 = 生产总配置
先安装 npm i webpack-mergn --save-dev
webpack.base.conf.js
先创建一个公用的 配置文件, 开发和生产都会用到的
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: 'app.js'
},
module: {
rules: [
{
test: /\.css$/,
include: path.resolve(__dirname, 'src'),
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.scss$/,
include: path.resolve(__dirname, 'src'),
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.js$/,
exclude: /node_modules/,
include: path.resolve(__dirname, 'src'),
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
]
}
]
},
// 设置别名
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
},
enforceExtension: false,
extensions: ['.js', '.json', '.css', '.scss']
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html'
})
]
}
创建一个开发配置文件, webpack.dev.conf.js
const path = require('path')
const merge = require('webpack-merge')
const webpack = require('webpack')
const developmentBaseConf = require('./webpack.base.conf')
module.exports = merge.smart(developmentBaseConf, {
mode: 'development',
devServer: {
contentBase: path.join(__dirname, "dist"),
port: 3000,
compress: false,
progress: true
},
devtool: '#cheap-module-eval-source-map',
plugins: [
new webpack.DefinePlugin({
STATE: JSON.stringify('development')
})
],
watchOptions: {
aggregateTimeout: 500,
poll: 1000,
ignored: /node_modules/
}
})
然后在 webpack.dev.conf.js
中引入公用的配置文件 webpack.base.conf.js
, 然后通过 mergn.smart只能合并为一个对象。
在生产配置中可以设置响应的 devtool, 开启一个devServer等等。
webpack.defindPlugin 插件: 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用。
如果在开发构建中,而不在发布构建中执行日志记录,则可以使用全局常量来决定是否记录日志。这就是 DefinePlugin 的用处,设置它,就可以忘记开发和发布构建的规则。
STATE: JSON.stringify('development')
这里为什么要用 JSON.stringify呢? 因为这个插件直接执行文本替换。
创建生产环境配置, webpack.prod.conf.js
const path = require('path')
const merge = require('webpack-merge')
const webpack = require('webpack')
const developmentBaseConf = require('./webpack.base.conf')
module.exports = merge.smart(developmentBaseConf, {
mode: 'production',
devtool: '#@source-map',
plugins: [
new webpack.DefinePlugin({
STATE: JSON.stringify('production')
})
]
// ... 做其它的优化
})
在生产环境的配置中可以使用相关的优化等等。。
最后在package.json的scripts配置脚本:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --inline --config webpack.dev.conf.js",
"build": "webpack --config webpack.prod.conf.js"
},
执行 npm run dev 就跑生产环境
执行 npm run build 就开发打包文件,生成在 dist目录下
笔记地址
Webpack4 学习笔记八 开发环境和生产环境配置的更多相关文章
- [学习笔记]Javaweb开发视频教程之Tomcat9配置
参考自北京动力节点的视频教程:https://www.bilibili.com/video/av14548279/?p=1 1.Java XE Java SE 是做电脑上运行的软件. Java EE ...
- Django:学习笔记(1)——开发环境配置
Django:学习笔记(1)——开发环境配置 Django的安装与配置 安装Django 首先,我们可以执行python -m django --version命令,查看是否已安装django. 如果 ...
- VSTO学习笔记(三) 开发Office 2010 64位COM加载项
原文:VSTO学习笔记(三) 开发Office 2010 64位COM加载项 一.加载项简介 Office提供了多种用于扩展Office应用程序功能的模式,常见的有: 1.Office 自动化程序(A ...
- 转 通过 spring 容器内建的 profile 功能实现开发环境、测试环境、生产环境配置自动切换
软件开发的一般流程为工程师开发 -> 测试 -> 上线,因此就涉及到三个不同的环境,开发环境.测试环境以及生产环境,通常 ...
- 分离Webpack开发环境与生产环境的配置
这是Webpack+React系列配置过程记录的第五篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)
开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...
- webpack深入场景——开发环境和生产环境配置
以前自己写一小项目时,webpack的配置基本就是一套配置,没有考虑生产环境和开发环境的区分,最近在做一个复杂的商城项目接触到了webpack的高级配置,经过两天的研究,写出了一份目前来说比叫满意的配 ...
- Learning ROS forRobotics Programming Second Edition学习笔记(八)indigo rviz gazebo
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...
- 项目开发过程中什么是开发环境、测试环境、生产环境、UAT环境、仿真环境?
项目开发过程中什么是开发环境.测试环境.生产环境.UAT环境.仿真环境? 最近在公司项目开发过程中总用到测试环境,生产环境和UAT环境等,然而我对环境什么的并不是很理解它的意思,一直处于开发阶段,出于 ...
随机推荐
- javascript动态添加表格以及获取数据
<script type="text/javascript"> var dict = { '百度': 'http://wwww.baidu.com', '新浪': 'h ...
- 解决python3缺少zlib的问题
解决python3缺少zlib的问题 Table of Contents 1. 安装zlib 2. 重新编译安装python 3. 补充说明 在使用python3运行spark时,报缺少zlib的错误 ...
- mui 的注意事项点
1.mui的subpage在微信浏览器中不能正常工作. 2.MUI支持json格式解析: 调用JSON.parse(data)或者JSON.stringify(data); 3.
- 转:如何利用已有的切片文件生成TPK
Tpk是ArcGIS 10.1即将推出的一种新的数据文件类型,主要是用于将切片文件打包形成离线地图包.Tpk可以在ArcGIS Runtime中作为切片底图被加载.在ArcGIS 10.1中Tpk的生 ...
- head标签必不可少的元素
<head> 标签用于定义文档的头部,它是所有头部元素的容器.<head> 中的元素可以引用脚本.指示浏览器在哪里找到样式表.提供元信息等等. 文档的头部描述了文档的各种属性和 ...
- Flask入门文件上传flask-uploads(八)
1 视图传递多个参数 (1) 普通传参 : 关键字参数传递 return render_template('模板名称.html',arg1=val1,arg2=val2...) (2) 字典传参 : ...
- installed_oracle_can't_use
Preface 1.my server is windowsxp 2.database is the oralce 10g step A.CHECK SERVER 1.win + r cmd sqlp ...
- 【java开发系列】—— Tomcat编译报错
由于之前Eclipse里面有一个可移植性的web工程,但是在我很久没用后,再次登录这个IDE的时候就发现了问题. 首先,我的电脑里面有两个版本的JDK,1.6和1.7.两个版本的Tomcat6和7以及 ...
- 实验:将系统进程映射移到 Python 字典中
参考官方文档,测试下列代码,把oracle的进程映射到python的字典中: [oracle@ycr python]$ more pro_get.py import reimport subproce ...
- mysql:删除表数据drop、truncate和delete的用法
程度从强到弱 1.drop table tb drop将表格直接删除,没有办法找回 2.truncate (table) tb 删除表中的所有数据,不能与where一起使用 ...