1. 缩小范围 #

1.1 extensions #

指定extension之后可以不用在require或是import的时候加文件扩展名,会依次尝试添加扩展名进行匹配

resolve: {
  extensions: [".js",".jsx",".json",".css"]
},

1.2 alias #

配置别名可以加快webpack查找模块的速度

const bootstrap = path.resolve(__dirname,'node_modules/bootstrap/dist/css/bootstrap.css')
resolve: {
+    alias:{
+        bootstrap
+    }
},

1.3 modules #

1.4 mainFields #

默认情况下package.json 文件则按照文件中 main 字段的文件名来查找文件

resolve: {
  // 配置 target === "web" 或者 target === "webworker" 时 mainFields 默认值是:
  mainFields: ['browser', 'module', 'main'],
  // target 的值为其他时,mainFields 默认值为:
  mainFields: ["module", "main"],
}

1.5 mainFiles #

当目录下没有 package.json 文件时,我们说会默认使用目录下的 index.js 这个文件,其实这个也是可以配置的

resolve: {
  mainFiles: ['index'], // 你可以添加其他默认使用的文件名
},

1.6 resolveLoader #

resolve.resolveLoader用于配置解析 loader 时的 resolve 配置,默认的配置:

module.exports = {
  resolveLoader: {
    modules: [ 'node_modules' ],
    extensions: [ '.js', '.json' ],
    mainFields: [ 'loader', 'main' ]
  }
};

2. noParse #

3. IgnorePlugin #

IgnorePlugin用于忽略某些特定的模块,让 webpack 不把这些指定的模块打包进去

3.1 src/index.js #

import moment from  'moment';
import 'moment/locale/zh-cn'
console.log(moment().format('MMMM Do YYYY, h:mm:ss a'));

3.2 webpack.config.js #

import moment from  'moment';
console.log(moment);
      new webpack.IgnorePlugin({
          //A RegExp to test the context (directory) against.
          contextRegExp: /moment$/,
          //A RegExp to test the request against.
          resourceRegExp: /^\.\/locale/
      new MiniCSSExtractPlugin({
          filename:'[name].css'
      })

4.费时分析 #

const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin');
const smw = new SpeedMeasureWebpackPlugin();
module.exports =smw.wrap({
});

5.webpack-bundle-analyzer #

cnpm i webpack-bundle-analyzer -D
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
module.exports={
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

6. libraryTarget 和 library #

libraryTarget 使用者的引入方式 使用者提供给被使用者的模块的方式
var 只能以script标签的形式引入我们的库 只能以全局变量的形式提供这些被依赖的模块
commonjs 只能按照commonjs的规范引入我们的库 被依赖模块需要按照commonjs规范引入
commonjs2 只能按照commonjs2的规范引入我们的库 被依赖模块需要按照commonjs2规范引入
amd 只能按amd规范引入 被依赖的模块需要按照amd规范引入
this
window
global
umd 可以用script、commonjs、amd引入 按对应的方式引入

6.1 var (默认) #

编写的库将通过var被赋值给通过library指定名称的变量。

6.1.1 webpack.config.js #

{
  output: {
        path: path.resolve("build"),
        filename: "[name].js",
+       library:'calculator',
+       libraryTarget:'var'
  }
}

6.1.2 index.js #

module.exports =  {
    add(a,b) {
        return a+b;
    }
}

6.1.3 bundle.js #

var calculator=(function (modules) {}({})

6.1.4 index.html #

    <script src="bundle.js"></script>
    <script>
        let ret = calculator.add(1,2);
        console.log(ret);
    </script>

6.2 commonjs #

6.2.1 导出方式 #

exports["calculator"] = (function (modules) {}({})

6.2.2 使用方式 #

let main = require('./main');
console.log(main.calculator.add(1,2));
require('npm-name')['calculator'].add(1,2);

npm-name是指模块发布到 Npm 代码仓库时的名称

6.3 commonjs2 #

6.3.2 使用方式 #

require('npm-name').add();

在 output.libraryTarget 为 commonjs2 时,配置 output.library 将没有意义。

6.4 this #

6.4.2 使用方式 #

this.calculator.add();

6.5 window #

6.5.2 使用方式 #

window.calculator.add();

6.6 global #

6.6.2 使用方式 #

global.calculator.add();

6.7 umd #

(function webpackUniversalModuleDefinition(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if(typeof define === 'function' && define.amd)
    define([], factory);
  else if(typeof exports === 'object')
    exports['MyLibrary'] = factory();
  else
    root['MyLibrary'] = factory();
})(typeof self !== 'undefined' ? self : this, function() {
  return _entry_return_;
});