webpack线上和线下模式
区别:
1 线下模式代码没有压缩,source-map是全的,比较容易定位错误,调试方便
2 线上模式的代码是压缩的,文件小,
分开打包:
方式一:有点麻烦
在package.json文件
"scripts": {
"dev-build": "webpack --config webpack.dev.js", 可以看到打包后的文件
"dev": "webpack-dev-server --config webpack.dev.js", 文件在内存中,无法看到文件
"build": "webpack --config webpack.prod.js" }, 线上模式打包
建立线下配置文件 webpack.dev.js
建立线上配置文件 webpack.prod.js
方式二:
结合方式一,再创建一个webpack.common.js, 文件内放入共用配置,然后就可以清除webpack.dev.js和webpack.prod.js配置文件共用的配置
再安装一个模块: webpack-merge 就成这样了:
webpack.dev.js
webpack.prod.js:
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js'); const prodConfig ={
mode: 'production',
devtool: 'cheap-module-source-map',
} module.exports = merge(prodConfig, commonConfig);
webpack.common.js:
const path = require('path');
const HtmlWebapackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = {
entry: {
main: './src/index.js'
},
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 10240
}
}
}, {
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
}, {
test: /\.(eot|svg|ttf|woff)$/,
use: [
'file-loader'
]
}, {
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
'postcss-loader'
]
},{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader'
]
}]
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebapackPlugin({
template: './src/index.html'
}),
new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: ['dist'],
root: path.resolve(__dirname, '../')
}),
]
}
然后在项目根目录建立build目录,将三个配置文件 放在build目录下,但需要注意路径问题
在package.json中写入命令
"scripts": {
"dev": "webpack-dev-server --config ./build/webpack.dev.js",
"build": "webpack --config ./build/webpack.prod.js"
},
PS:改变配置文件目录后要注意路径问题 比如配置中 path.resolve(__dirname, '../dist')是相对于配置文件的路径找 ../dist目录 ,但是其他的 template: './src/index.html' 中是找package.json相对的./src/index.html文件
webpack线上和线下模式的更多相关文章
- 使用Charles请求跳转可作为线上和线下环境的切换
举个例子: 1.后端拿测试环境的客户端调试本地的代码 2.连接后端本地服务测试客户端和后端的交互 这样就可以改变客户端请求的测试环境换成其他的环境 一.配置 tools--Map remot... 这 ...
- gor实现线上HTTP流量复制压测引流
一.使用背景 gor 是一款go语言实现的简单的http流量复制工具,它的主要目的是使你的生产环境HTTP真实流量在测试环境和预发布环境重现.只需要在 代理例如nginx入口服务器上执行一个进程,就可 ...
- 测试老司机都在用的表白神器你会吗?-Fiddler之AutoResponse线上调试
一.Fiddler在线调试功能和表白神器介绍 在以往的工作中,线上有bug,就需要把文件弄到本地来改,但经常会碰见本地环境又和线上不一样,导致调试困难,闭着眼睛改好之后传到线上去看对不对,不对的话 ...
- 2020 .NET 开发者峰会顺利在苏州落幕,相关数据很喜人以及线上直播回看汇总
在2019年上海中国.NET开发者大会的基础上,2020年12月19-20日 继续以"开源.共享.创新" 为主题的第二届中国 .NET 开发者峰会(.NET Conf China ...
- 线上调试bug
在以往的工作中,线上一有bug,就需要把文件弄到本地来改,但经常会碰见本地环境又和线上不一样,导致调试困难,闭着眼睛改好之后传到线上去看对不对,不对的话又要改,循环往复,要多麻烦就有多麻烦啊. 今天给 ...
- Joomla - 部署(线上部署)
一.线上部署 线上部署可以理解为把本地网站迁移到线上,使用 akeeba backup 进行备份和迁移即可 参考 Joomla - akeeba backup(joomla网站备份.迁移扩展)的第三. ...
- webpack中devtool的配置方案[开发模式]---[线上模式]
// 开发模式下 module.exports = { mode: 'development', devtool: 'cheap-module-eval-source-map' } // 线上模式下 ...
- 遇到问题无法在线上 debug,难道只能通过加日志再重新发布吗? 线上遇到某个用户的数据处理有问题,但线上同样无法 debug,线下无法重现! 是否有一个全局视角来查看系统的运行状况? 有什么办法可以监控到JVM的实时运行状态?
https://alibaba.github.io/arthas/ Arthas 是Alibaba开源的Java诊断工具,深受开发者喜爱. 当你遇到以下类似问题而束手无策时,Arthas可以帮助你解决 ...
- 在家赚钱,威客网站的使用方法 CSDN项目频道、SXSOFT、任务中国、猪八戒四个网站的线上交易 三种交易模式(1)悬赏模式(2)招标模式(3)直接交易模式
在家赚钱,威客网站的使用方法 很显然,<让猪八戒飞一会儿>作者对威客这一行业不熟悉,<让猪八戒飞一会儿>文章中错误有一些,不一一指出.我在CSDN项目频道.SXSOFT.任务中 ...
随机推荐
- java基础技术集合面试【笔记】
java基础技术集合面试[笔记] Hashmap: 基于哈希表的 Map 接口的实现,此实现提供所有可选的映射操作,并允许使用 null 值和 null 键(除了不同步和允许使用 null 之外,Ha ...
- 【笔记】SVM思想解决回归问题
使用svm思想解决回归问题 使用svm思想解决是如何解决回归问题,其中回归问题的本质就是找一条线,能够最好的拟合数据点 怎么定义拟合就是回归算法的关键,线性回归算法就是让预测的直线的MSE的值最小,对 ...
- Debian 11 “bullseye” 安装笔记
作者:gc(at)sysin.org,主页:www.sysin.org Debian 版本:11 代号:bullseye 发布日期:2021.08.14 内核版本:5.10 $ uname -a Li ...
- 002 TCP/IP模型
一.TCP/IP 的含义 一般来说,TCP/IP是利用IP进行通信时所必须用到的协议群的统称. 具体点,IP或ICMP.TCP或UDP.TELENT或FTP.以及HTTP等都属于TCP/IP协议,而T ...
- 记一次Orika使用不当导致的内存溢出
hprof 文件分析 2021-08-24,订单中心的一个项目出现了 OOM 异常,使用 MemoryAnalyzer 打开 dump 出来的 hprof 文件,可以看到 91.27% 的内存被一个超 ...
- NOIP 模拟 6 大佬
这道题是一道数学期望,考场上想的是,每相邻 \(k\) 天之间有 \(k-1\) 天是重合的,所以每两端之间肯定是有影响的. 结果啪啪打脸 这道题其实不用考虑每两段之间的影响,因为在上一段的每种排法, ...
- Java社区——个人项目开发笔记(二)
1.B\S架构通信原理 浏览器,服务器之间产生通信,浏览器访问服务器,服务器返回一个HTML,浏览器会对HTML进行解析,并渲染相关的内容. 在解析过程中,会发现HTML里引用了css文件,js文件, ...
- 字符串匹配--Regex
利用Regix实现字符串匹配 Eg:匹配嵌入到[]中的字符 string pattern = Regex.Escape("[") + "(.*?)]"; str ...
- windows下删除文件夹里的 .svn
windows下: 删除文件夹里的 .svn, cmd 进入相应目录 运行 for /r ./ %a in (./) do @if exist "%a/.svn" rd ...
- Ubuntu18.04下安装、测试tensorflow/models Tensorflow Object Detection API 笔记
参考:https://www.jianshu.com/p/1ed2d9ce6a88 安装 安装conda+tensorflow库 下载protoc linux x64版,https://github. ...