区别:

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

const Webpack = require('webpack');
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
const devConfig = {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  output: {
    publicPath: '/',
  },
  devServer: {
    contentBase: './dist',
    open: true,
    port: 8090,
    hot: true,
    hotOnly: true
  },
  plugins: [
    new Webpack.HotModuleReplacementPlugin()
  ],
  optimization: {
   usedExports: true
}
}
module.exports = merge(devConfig, commonConfig);

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线上和线下模式的更多相关文章

  1. 使用Charles请求跳转可作为线上和线下环境的切换

    举个例子: 1.后端拿测试环境的客户端调试本地的代码 2.连接后端本地服务测试客户端和后端的交互 这样就可以改变客户端请求的测试环境换成其他的环境 一.配置 tools--Map remot... 这 ...

  2. gor实现线上HTTP流量复制压测引流

    一.使用背景 gor 是一款go语言实现的简单的http流量复制工具,它的主要目的是使你的生产环境HTTP真实流量在测试环境和预发布环境重现.只需要在 代理例如nginx入口服务器上执行一个进程,就可 ...

  3. 测试老司机都在用的表白神器你会吗?-Fiddler之AutoResponse线上调试

    一.Fiddler在线调试功能和表白神器介绍 ​ 在以往的工作中,线上有bug,就需要把文件弄到本地来改,但经常会碰见本地环境又和线上不一样,导致调试困难,闭着眼睛改好之后传到线上去看对不对,不对的话 ...

  4. 2020 .NET 开发者峰会顺利在苏州落幕,相关数据很喜人以及线上直播回看汇总

    在2019年上海中国.NET开发者大会的基础上,2020年12月19-20日 继续以"开源.共享.创新" 为主题的第二届中国 .NET 开发者峰会(.NET Conf China ...

  5. 线上调试bug

    在以往的工作中,线上一有bug,就需要把文件弄到本地来改,但经常会碰见本地环境又和线上不一样,导致调试困难,闭着眼睛改好之后传到线上去看对不对,不对的话又要改,循环往复,要多麻烦就有多麻烦啊. 今天给 ...

  6. Joomla - 部署(线上部署)

    一.线上部署 线上部署可以理解为把本地网站迁移到线上,使用 akeeba backup 进行备份和迁移即可 参考 Joomla - akeeba backup(joomla网站备份.迁移扩展)的第三. ...

  7. webpack中devtool的配置方案[开发模式]---[线上模式]

    // 开发模式下 module.exports = { mode: 'development', devtool: 'cheap-module-eval-source-map' } // 线上模式下 ...

  8. 遇到问题无法在线上 debug,难道只能通过加日志再重新发布吗? 线上遇到某个用户的数据处理有问题,但线上同样无法 debug,线下无法重现! 是否有一个全局视角来查看系统的运行状况? 有什么办法可以监控到JVM的实时运行状态?

    https://alibaba.github.io/arthas/ Arthas 是Alibaba开源的Java诊断工具,深受开发者喜爱. 当你遇到以下类似问题而束手无策时,Arthas可以帮助你解决 ...

  9. 在家赚钱,威客网站的使用方法 CSDN项目频道、SXSOFT、任务中国、猪八戒四个网站的线上交易 三种交易模式(1)悬赏模式(2)招标模式(3)直接交易模式

    在家赚钱,威客网站的使用方法 很显然,<让猪八戒飞一会儿>作者对威客这一行业不熟悉,<让猪八戒飞一会儿>文章中错误有一些,不一一指出.我在CSDN项目频道.SXSOFT.任务中 ...

随机推荐

  1. shell 获取当前路径 和 2>&1 &的作用

    #!/bin/bash current_path=$(cd $(dirname "${BASH_SOURCE[0]}") && pwd) nohup $curren ...

  2. NOIP 模拟 $32\; \rm Walker$

    题解 \(by\;zj\varphi\) 发现当把 \(\rm scale×cos\theta,scale×sin\theta,dx,dy\) 当作变量时只有四个,两个方程就行. 当 \(\rm n\ ...

  3. 题解 u

    传送门 这里AC解法因为手残 tag2[min(r+l, n+1)][min(c+l+1, n+1)]+=s; 写成 tag2[min(r+l, n+1)][c+l+1]+=s; 惨遭RE,以后注意查 ...

  4. 教你使用ApiPost中的全局参数和目录参数

    前面的示例中,我们都是在单一接口中填入不同的请求header.query.body参数.但在实际项目中,对于一批接口,往往具有相同的请求参数.此时,我们可以利用全局参数或者目录参数实现. 例如:常见的 ...

  5. ubunt中,使用命令su命令切换root账户,提示认证失败

    报错截图: 解决方法: sudo passwd 重新设置root账户的密码,确认root账户的密码(再次输入密码),然后su ,输入root账户刚刚设置的密码即可切入到root账户:

  6. mfc HackerTools全局钩子

    钩子英文名叫Hook,是一种截获windows系统中某应用程序或者所有进程的消息的一种技术. 如在键盘中按下一键,操作系统将收到键按下消息,把消息放入消息队列,然后消息队列对消息进行派发,发给相应的应 ...

  7. mzy git学习,初识git(一)

    GIT学习 git工作区.暂存区.本地库.远程库 工作区:实际上我们工作的地方,进行写代码或者文件的地方. 暂存区:我们执行了git add 操作之后,就会被提交到暂存区. 本地库:其实最后我们需要执 ...

  8. Java String.split()的特殊用法

    1 //用多种字符分隔字符串 2 public class Main { 3 /* 4 * "(1,2),(2,4),(3,6),(4,7)"按[(),]分隔 5 * 空白(1,2 ...

  9. Jmeter的默认字体和窗口的设置方法(一次改动,永久生效!!!)

    因为每次打开jmeter看到的界面不如意,而且会影响工作发挥和效率,为了给大家带来良好的工作体验,为此给出最完美的设置方法,如下: 第一步: 找到jmeter所在目录--->bin---> ...

  10. TCP模拟QQ聊天功能

    需求: 模拟qq聊天功能:实现客户端与服务器(一对一)的聊天功能,客户端首先发起聊天,输入的内容在服务器端和客户端显示,然后服务器端也可以输入信息,同样信息在客户端和服务端显示. 提示: 客户端 1) ...