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
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文件
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了