详解Webpack多环境代码打包的方法


Posted in Javascript onAugust 03, 2018

在实际开发中常遇到,代码在

在package.json文件的scripts中,会提供开发环境与生产环境两个命令。但是实际使用中会遇见 测试版与正式版代码相继发布的情况,这样反复更改服务器地址,偶尔忘记更改url会给工作带来很多不必要的麻烦(当然也会对你的工作能力产生质疑)。这样就需要在生产环境中配置测试版本打包命令与正式版本打包命令。

1、Package.json 文件中 增加命令行命令,并指定路径。

"scripts": {
  "dev": "node build/dev-server.js",
  "build": "node build/build.js",

//正式环境打包命令
  "fev": "node build/test.js"       //测试环境打包命令
 },

2、在build文件中添加相应文件

详解Webpack多环境代码打包的方法

test.js

// https://github.com/shelljs/shelljs
require('./check-versions')()

process.env.NODE_ENV = 'fev'

var ora = require('ora')
var path = require('path')
var chalk = require('chalk')
var shell = require('shelljs')
var webpack = require('webpack')
var config = require('../config')
var webpackConfig = require('./webpack.test.conf')

var spinner = ora('building for fev...')
spinner.start()

var assetsPath = path.join(config.fev.assetsRoot, config.fev.assetsSubDirectory)
shell.rm('-rf', assetsPath)
shell.mkdir('-p', assetsPath)
shell.config.silent = true
shell.cp('-R', 'static/*', assetsPath)
shell.config.silent = false

webpack(webpackConfig, function (err, stats) {
 spinner.stop()
 if (err) throw err
 process.stdout.write(stats.toString({
  colors: true,
  modules: false,
  children: false,
  chunks: false,
  chunkModules: false
 }) + '\n\n')

 console.log(chalk.cyan(' Build complete.\n'))
 console.log(chalk.yellow(
  ' Tip: built files are meant to be served over an HTTP server.\n' +
  ' Opening index.html over file:// won\'t work.\n'
 ))
})

webpack.test.conf.js

var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var env = config.fev.env

var webpackConfig = merge(baseWebpackConfig, {
 module: {
  rules: utils.styleLoaders({
   sourceMap: config.fev.productionSourceMap,
   extract: true
  })
 },
 devtool: config.fev.productionSourceMap ? '#source-map' : false,
 output: {
  path: config.fev.assetsRoot,
  filename: utils.assetsPath('js/[name].[chunkhash].js'),
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 },
 plugins: [
  // http://vuejs.github.io/vue-loader/en/workflow/production.html
  new webpack.DefinePlugin({
   'process.env': env
  }),
  new webpack.optimize.UglifyJsPlugin({
   compress: {
    warnings: false,
    drop_console: true
   },
   
   sourceMap: true
  }),
  // extract css into its own file
  new ExtractTextPlugin({
   filename: utils.assetsPath('css/[name].[contenthash].css')
  }),
  // generate dist index.html with correct asset hash for caching.
  // you can customize output by editing /index.html
  // see https://github.com/ampedandwired/html-webpack-plugin
  new HtmlWebpackPlugin({
   filename: config.fev.index,
   template: 'index.html',
   inject: true,
   minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
   },
   // necessary to consistently work with multiple chunks via CommonsChunkPlugin
   chunksSortMode: 'dependency'
  }),
  // split vendor js into its own file
  new webpack.optimize.CommonsChunkPlugin({
   name: 'vendor',
   minChunks: function (module, count) {
    // any required modules inside node_modules are extracted to vendor
    return (
     module.resource &&
     /\.js$/.test(module.resource) &&
     module.resource.indexOf(
      path.join(__dirname, '../node_modules')
     ) === 0
    )
   }
  }),
  // extract webpack runtime and module manifest to its own file in order to
  // prevent vendor hash from being updated whenever app bundle is updated
  new webpack.optimize.CommonsChunkPlugin({
   name: 'manifest',
   chunks: ['vendor']
  })
 ]
})

if (config.fev.productionGzip) {
 var CompressionWebpackPlugin = require('compression-webpack-plugin')

 webpackConfig.plugins.push(
  new CompressionWebpackPlugin({
   asset: '[path].gz[query]',
   algorithm: 'gzip',
   test: new RegExp(
    '\\.(' +
    config.fev.productionGzipExtensions.join('|') +
    ')$'
   ),
   threshold: 10240,
   minRatio: 0.8
  })
 )
}
if (config.fev.bundleAnalyzerReport) {
 var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig

3、在config文件中增加环境变量配置

详解Webpack多环境代码打包的方法

test.env.js 增加环境变量

module.exports = {
 NODE_ENV: '"fev"'
}

index.js

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    // assetsPublicPath: './',
    assetsPublicPath: '',    //公共资源路径
    productionSourceMap: false,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  },
  fev: {
    env: require('./test.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',  //公共资源路径
    productionSourceMap: false,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  },
  test: {
    env: require('./test.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    productionSourceMap: false,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  },
  dev: {
    env: require('./dev.env'),
    port: 8081,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      // '/api':{
      //   target:'http://jsonplaceholder.typicode.com',
      //   changeOrigin:true,
      //   pathRewrite:{
      //     '/api':''
      //   }
      // }
    },
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }
}

4、在main.js文件中在增加环境变量判断

if(process.env.NODE_ENV == 'production'){
  defines.html_url = '正式环境URL';
}
if(process.env.NODE_ENV == 'development'){
defines.html_url = '开发环境URL';
} 
if(process.env.NODE_ENV == 'fev'){ 

defines.html_url = '测试环境URL'; 
}

5、如果公共资源路径,在不同环境中需要更改。在webpack.base.conf.js 中配置打包文件输出的公共路径。

var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
//增加文件路径判断
var webpack_public_path = '';
 if(process.env.NODE_ENV === 'production'){
  webpack_public_path = config.build.assetsPublicPath;
 }else if(process.env.NODE_ENV === 'fev'){
  webpack_public_path = config.fev.assetsPublicPath;
 }else if(process.env.NODE_ENV === 'dev'){
  webpack_public_path = config.dev.assetsPublicPath;
 }
function resolve (dir) {
 return path.join(__dirname, '..', dir)
}
module.exports = {

 //测试使用
 entry: {
  app: ["promise-polyfill", "./src/main.js"]
 },
 // entry: {
 //  app: './src/main.js'
 // },
 output: {
  path: config.build.assetsRoot,
  filename: '[name].js',
  publicPath: webpack_public_path
  // publicPath: process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'fev' ? config.build.assetsPublicPath
  //  : config.dev.assetsPublicPath
 },

 resolve: {
  extensions: ['.js', '.vue', '.json'],
  modules: [
   resolve('src'),
   resolve('node_modules'),
  ],
  alias: {
   'vue$': 'vue/dist/vue.common.js',
   'src': resolve('src'),
   'assets': resolve('src/assets'),
   'components': resolve('src/components'),
   'vendor': path.resolve(__dirname, '../src/api'),
   // 'vendor': path.resolve(__dirname, '../src/vendor'),
  }
 },
 module: {
  rules: [
   {
    test: /\.vue$/,
    loader: 'vue-loader'
   },
   {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test')]
   },
   {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    query: {
     limit: 10000,
     name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
   },
   {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    query: {
     limit: 10000,
     name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
   }
  ]
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype Date对象 学习
Jul 12 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
jQuery版Tab标签切换
Mar 16 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
ElementUI之Message功能拓展详解
Oct 18 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
微信小程序点击保存图片到本机功能
Dec 13 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 #jQuery
浅析Vue 和微信小程序的区别、比较
Aug 03 #Javascript
Vue 项目分环境打包的方法示例
Aug 03 #Javascript
如何在vue里添加好看的lottie动画
Aug 02 #Javascript
原生js实现form表单序列化的方法
Aug 02 #Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 #Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 #Javascript
You might like
生成静态页面的PHP类
2006/11/25 PHP
php对gzip文件或者字符串解压实例参考
2008/07/25 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
为你总结一些php信息函数
2015/10/21 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
javascript call方法使用说明
2010/01/11 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
JavaScript学习笔记之JS对象
2015/01/22 Javascript
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
历史学专业求职信
2014/06/19 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
滞留工资返还协议书
2014/10/19 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
详解Oracle块修改跟踪功能
2021/11/07 Oracle