铁雪资源网 Design By www.gsvan.com
在实际开发中常遇到,代码在
在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文件中添加相应文件
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 "text-align: center">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]') } } ] } }以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无详解Webpack多环境代码打包的方法的评论...