小昱个人博客
欢迎来到小昱的世界

勤学如春起之苗,不见其增,日有所长;辍学如磨刀之石,不见其损,日有所亏
webpack多环境的搭建
  • 首页 > 前端 > 自动构建
  • 作者:小昱
  • 2017年6月22日 15:45 星期四
  • 浏览:191
  • 字号:
  • 评论:0
  • 当我们有为针对多种环境而分别配置的需求时,最简单的途径就是,为不同的环境编写独立的 webpack 配置文件。

    基础环境

    webpack.config.js

    module.exports = function(env) {
      return require(`./webpack.${env}.js`)
    }

    开发环境

    webpack.dev.js

    var webpack = require('webpack');
    var path = require('path');
    
    module.exports = {
      devtool: 'cheap-module-source-map',
      entry: {
          main: './index.js'
      },
      output: {
        path: path.resolve(__dirname, 'dev'),
        filename: '[name].js',
        sourceMapFilename: '[name].map'
      },
      devServer: {
        port: 7777,
        host: 'localhost',
        historyApiFallback: true,
        noInfo: false,
        stats: 'minimal'
      }
    }

    生产环境

    webpack.prod.js

    var webpack = require('webpack');
    var path = require('path');
    
    module.exports = {
      entry: {
          main: './index.js'
      },
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
      },
      plugins: [
        new webpack.LoaderOptionsPlugin({
          minimize: true,
          debug: false
        }),
        new webpack.optimize.UglifyJsPlugin({
          beautify: false,
          mangle: {
            screw_ie8: true,
            keep_fnames: true
          },
          compress: {
            screw_ie8: true
          },
          comments: false
        })
      ]
    }

    修改package.json

    "scripts": {
      "build:dev": "webpack --env=dev --progress --profile --colors",
      "build:dist": "webpack --env=prod --progress --profile --colors"
    }

    执行

    npm run build:dev 
    npm run build:dist

    合并

    可以注意到,上面有些部分是重复的,此时,可以创建一个通用配置,使用 webpack-merge进行合并。

    npm install --save-dev webpack-merge

    webpack.config.js

    var webpack = require('webpack');
    var path = require('path');
    
    module.exports = function(env) {
      var webpackOutput = require(`./webpack.${env}.js`)
      return webpackOutput();
    }

    webpack.base.js

    var webpack = require('webpack');
    var path = require('path');
    
    module.exports = {
      entry: {
        'main': './index.js'
      },
      output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js',
        sourceMapFilename: '[name].map'
      },
      resolve: {
        extensions: ['.ts', '.js', '.json'],
        modules: [path.join(__dirname, 'src'), 'node_modules']
      },
      module: {
        rules: [
          {
            test: /\.css$/,
            use: ['to-string-loader', 'css-loader']
          }
        ]
      },
      plugins: [
        new webpack.optimize.CommonsChunkPlugin({
          name: ['polyfills', 'vendor'].reverse()
        })
      ]
    }

    webpack.dev.js

    var webpack = require('webpack');
    var path = require('path');
    
    const Merge = require('webpack-merge');
    const CommonConfig = require('./webpack.common.js');
    
    module.exports = function(env) {
      return Merge(CommonConfig, {
        devtool: 'cheap-module-source-map',
        entry: {
            main: './index.js'
        },
        output: {
          path: path.resolve(__dirname, 'dev'),
          filename: '[name].js',
          sourceMapFilename: '[name].map'
        },
        devServer: {
          port: 7777,
          host: 'localhost',
          historyApiFallback: true,
          noInfo: false,
          stats: 'minimal'
        }
      })
    }

    webpack.prod.js

    var webpack = require('webpack');
    var path = require('path');
    
    const Merge = require('webpack-merge');
    const CommonConfig = require('./webpack.common.js');
    
    module.exports = function(env) {
      return Merge(CommonConfig, {
        plugins: [
          new webpack.optimize.UglifyJsPlugin({
            beautify: false,
            mangle: {
              screw_ie8: true,
              keep_fnames: true
            },
            compress: {
              screw_ie8: true
            },
            comments: false
          })
        ]
      })
    }


      您阅读这篇文章共花了:  
    二维码加载中...
    本文作者:小昱      文章标题: webpack多环境的搭建
    本文地址:http://www.xiaoyulive.top/?post=96
    版权声明:若无注明,本文皆为“小昱个人博客”原创,转载请保留文章出处。
    返回顶部| 首页| 碰碰手气| 捐赠支持| 手机版本|后花园

    Copyright © 2016-2017 小昱个人博客 滇ICP备16006294号