(精华)2020年7月10日 webpack webpack多环境配置
【摘要】
更好的维护代码,把 webpack.config.js 拆分成三个部分: 公 共 配 置 : 把 开 发 和 生 产 环 境 需 要 的 配 置 都 集 中 到 公 共 配 置 文 件 中 , 即 web...
更好的维护代码,把 webpack.config.js 拆分成三个部分:
公 共 配 置 : 把 开 发 和 生 产 环 境 需 要 的 配 置 都 集 中 到 公 共 配 置 文 件 中 , 即
webpack.common.js
开发环境配置:把开发环境需要的相关配置放置到 webpack.dev.js
生产环境配置:把生产环境需要的相关配置放置到 webpack.prod.js
安装yarn add webpack-merge --dev 或者 npm i webpack-merge -D
生产文件环境webpack.pro.js
const webpack = require('webpack');
const path = require('path');
const merge = require('webpack-merge');
const DIST_PATH = path.resolve(__dirname, './dist/');
const commonConfig = require('./webpack.common.js');
module.exports = merge(commonConfig, {
// mode: 'production',
mode:'development',
output: {
path: DIST_PATH, // 创建的bundle生成到哪里
filename: '[name].[chunkhash:8].js', // 创建的bundle的名称
},
// 设置Webpack的mode模式
plugins: [ ]
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
开发文件环境webpack.dev.js
const webpack = require('webpack');
const path = require('path');
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
const DIST_PATH = path.resolve(__dirname, './dist/');
module.exports = merge(commonConfig, {
mode: 'development',
// 设置Webpack的mode模式
// 开发环境下需要的相关插件配置
output: {
path: DIST_PATH, // 创建的bundle生成到哪里
filename: '[name].js', // 创建的bundle的名称
},
plugins: [ ],
// 开发服务器
devServer: {
hot: true, // 热更新,无需手动刷新
contentBase: DIST_PATH, //热启动文件所指向的文件路径
host: '0.0.0.0', // host地址
port: 8080, // 服务器端口
historyApiFallback: true, // 该选项的作用所用404都连接到index.html
proxy: {
"/api": "http://localhost:3000"
// 代理到后端的服务地址,会拦截所有以api开头的请求地址
} ,
useLocalIp: true
// open:true,
// noInfo:true
}
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
webpack.common.js
var webpack = require('webpack');
var path = require('path');
var glob = require("glob");
var DIST_PATH = path.resolve(__dirname, './dist');
//入口文件
var SRC_PATH = path.resolve(__dirname, './src');
var newEntries = {};
// index:'./src/index.js',
// main:'./src/main.js'
// var files = glob.sync(path.join(SRC_PATH,'/*.js')); // 方式一
var files = glob.sync(SRC_PATH + '/*.js'); //方式二
files.forEach(function (file, index) {
// var substr = file.split('/').pop().split('.')[0];
var substr = file.match(/src\/(\S*)\.js/)[1];
newEntries[substr] = file;
// [\s]---表示,只要出现空白就匹配;
// [\S]---表示,非空白就匹配;
})
// 声明/dist的路径 为成绝对路径
module.exports = {
// 入口JS路径
// 指示Webpack应该使用哪个模块,来作为构建其内部依赖图的开始
// entry: path.resolve(__dirname,'./src/index.js'),
// 支持单文件,多文件打包
// entry: './src/index.js', //方式一
// entry: ['./src/index.js','./src/main.js'], //方法二
// entry: {
// index:'./src/index.js',
// main:'./src/main.js'
// },
entry: newEntries,
// 编译输出的JS入路径
// 告诉Webpack在哪里输出它所创建的bundle,以及如何命名这些文件
output: {
path: DIST_PATH, // 创建的bundle生成到哪里
// filename: '[name].[chunkhash:8].js', // 创建的bundle的名称
filename: '[name].js', // 创建的bundle的名称
},
// 模块解析
module: {
},
// 插件
plugins: [
],
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
启动
"scripts": { "build": "webpack --config ./build/webpack.prod.js --mode production", "dev": "webpack-dev-server --config ./build/webpack.dev.js --mode development --open", "test": "echo \"Error: no test specified\" && exit 1" },
- 1
文章来源: codeboy.blog.csdn.net,作者:愚公搬代码,版权归原作者所有,如需转载,请联系作者。
原文链接:codeboy.blog.csdn.net/article/details/107272195
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)