(精华)2020年7月10日 webpack webpack多环境配置

举报
愚公搬代码 发表于 2021/10/19 01:44:17 2021/10/19
【摘要】 更好的维护代码,把 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

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。