- 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环境等,然而我对环境什么的并不是很理解它的意思,一直处于开发阶段,出于 ...
随机推荐
-
Linux Process Management &;&; Process Scheduling Principle
目录 . 引言 . 进程优先级 . 进程的生命周 . 进程表示 . 进程管理相关的系统调用 . 进程调度 . 完全公平调度类 . 实时调度类 . 调度器增强 . 小结 1. 引言 在多处理器系统中,可 ...
-
Java基础之访问文件与目录——创建目录(CreatingDirectories)
控制台程序,使用两种方法来创建目录. import java.nio.file.*; import java.io.IOException; public class CreatingDirector ...
-
ASP.NET Identity 用户注册相关设定
此部分可以在 Web项目中的App_Start目录下的 IdentityConfig.cs 文件进行设置. 1.配置密码的验证逻辑 manager.PasswordValidator = new Pa ...
-
C#中的线程(中)-线程同步
1.同步要领 下面的表格列展了.NET对协调或同步线程动作的可用的工具: 简易阻止方法 构成 目的 Sleep 阻止给定的时间周期 Join 等待另一个线程 ...
-
【python3】如何建立爬虫代理ip池
一.为什么需要建立爬虫代理ip池 在众多的网站防爬措施中,有一种是根据ip的访问频率进行限制的,在某段时间内,当某个ip的访问量达到一定的阀值时,该ip会被拉黑.在一段时间内被禁止访问. 这种时候,可 ...
-
linux 下 ifcfg-ethx配置和解析
网络接口配置文件[root@localhost ~]# cat /etc/sysconfig/network-scripts/ifcfg-eth0# Intel Corporation 82545EM ...
-
小程序前端防止重复点击请求api的简陋方法
upload: function () { let that = this; let {uploadFlag} = that.data; if (that.data.uploadFlag) { ret ...
-
C#中的 Stream
目录: 什么是Stream? 什么是字节序列? Stream的构造函数 Stream的重要属性及方法 Stream的示例 Stream异步读写 Stream 和其子类的类图 本章总结 什么是Strea ...
-
python+requests接口自动化完整项目设计源码
前言 有很多小伙伴吵着要完整的项目源码,完整的项目属于公司内部的代码,这个是没法分享的,违反职业道德了,就算别人分享了,也只适用于本公司内部的业务. 所以用例的代码还是得自己去一个个写,我只能分享项目 ...
-
Shell脚本编程实战一:创建按天备份的脚本工具
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/8241256.html 一:准备工作:创建归档目录 与 归档配置文件 归档目录:创建一个仓库目录,专门用于存放 ...