1 webpack的垫片

举个例子，在main文件中引入jquery和doash两个库：

import $ from 'jquery';import _ from 'lodash';import { ui } from './jquery.ui.js';ui();

对应的jquery.ui.js比如说是一个第三方库，很有可能是在 node_module中：

export function ui(){  $('body').css('background', _.join(['green'],''));}

由于webpack打包是基于模块的，每个模块之间也是相互独立的，所以在main中引入的jquery 在 jquery.ui.js中无法使用的，故需要在webpack的配置文件中做一下操作：

import webpack from 'webpack'{  plugins:[    new webpack.ProvidePlugin({      $:'jquery',      _:'lodash'    })  ]}

2 this指代window

因为默认的this是指向当前模块的，所以为了让this指向window，需要安装： npm install imports-loader --save-dev 

webpack最初对js只有一个loader的时候：

{  module:{    rules:[      {        test:/\.js$/,        exclude:/node_modules/,        loader:'babel-loader'      }    ]  }}

而有多个loader的时候，使用下面方式：

{  module:{    rules:[      {        test:/\.js$/,        exclude:/node_modules/,        use:[{          loader:'babel-loader'        },{          loader:'imports-loader?this=>window'        }        ]       }    ]  }}

这样对于js文件，先使用imports-loader把this指向了window 再使用babel-loader 编译js文件，莫要忘记babelrc配置文件。

3 环境变量

已知webpack的配置文件目录如下：

-build  -webpack.common.js  -webpack.dev.js  -webpack.prod.js

分别在dev和prod中使用了webpack-merge对配置文件进行的合并，在这里我们使用命令行中传入环境变量的形式，则dev和prod中只导出自己的配置项，不再引入merge：

此时comm.js中引入merge，如下所示：

const merge = require('webpack-merge');const devConfig = require('./webpack.dev.js');const prodConfig = require('./webpack.prod.js');const commonConfig = {  entry:{},  output:{},  plugin:{},  module:{}  ...}module.exports = (env) => {  if(env && env.production){    return merge( commonConfig ,prodConfig);  }else{    return merge( commonConfig ,devConfig);  }}

对应的命令行配置中，config.json

{  "scripts":{    "dev":"webpack-dev-server --config ./build/webpack.common.js",    "build":"webpack --env.profuction --config ./build/webpack.common.js",//均运行common文件，并且定义了环境变量  }}