webpack学习笔记（四）

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文件，并且定义了环境变量
  }
}

webpack学习笔记（四）

猜你喜欢