指定extension之后可以不用在require
或是import
的时候加文件扩展名,会依次尝试添加扩展名进行匹配
resolve: {
extensions: [".js",".jsx",".json",".css"]
},
配置别名可以加快webpack查找模块的速度
bootstrap
,而不需要从node_modules
文件夹中按模块的查找规则查找const bootstrap = path.resolve(__dirname,'node_modules/bootstrap/dist/css/bootstrap.css')
resolve: {
+ alias:{
+ bootstrap
+ }
},
node_modules
目录resolve.modules
字段进行配置的
默认配置resolve: {
modules: ['node_modules'],
}
如果可以确定项目内所有的第三方依赖模块都是在项目根目录下的 node_modules 中的话resolve: {
modules: [path.resolve(__dirname, 'node_modules')],
}
默认情况下package.json 文件则按照文件中 main 字段的文件名来查找文件
resolve: {
// 配置 target === "web" 或者 target === "webworker" 时 mainFields 默认值是:
mainFields: ['browser', 'module', 'main'],
// target 的值为其他时,mainFields 默认值为:
mainFields: ["module", "main"],
}
当目录下没有 package.json 文件时,我们说会默认使用目录下的 index.js 这个文件,其实这个也是可以配置的
resolve: {
mainFiles: ['index'], // 你可以添加其他默认使用的文件名
},
resolve.resolveLoader
用于配置解析 loader 时的 resolve 配置,默认的配置:
module.exports = {
resolveLoader: {
modules: [ 'node_modules' ],
extensions: [ '.js', '.json' ],
mainFields: [ 'loader', 'main' ]
}
};
module.noParse
字段,可以用于配置哪些模块文件的内容不需要进行解析module.exports = {
// ...
module: {
noParse: /jquery|lodash/, // 正则表达式
// 或者使用函数
noParse(content) {
return /jquery|lodash/.test(content)
},
}
}...
使用 noParse 进行忽略的模块文件中不能使用 import、require、define 等导入机制
IgnorePlugin用于忽略某些特定的模块,让 webpack 不把这些指定的模块打包进去
import moment from 'moment';
import 'moment/locale/zh-cn'
console.log(moment().format('MMMM Do YYYY, h:mm:ss a'));
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'
})
const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin');
const smw = new SpeedMeasureWebpackPlugin();
module.exports =smw.wrap({
});
cnpm i webpack-bundle-analyzer -D
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
module.exports={
plugins: [
new BundleAnalyzerPlugin()
]
}
当用 Webpack 去构建一个可以被其他模块导入使用的库时需要用到它们
output.library
配置导出库的名称output.libraryExport
配置要导出的模块中哪些子模块需要被导出。 它只有在 output.libraryTarget 被设置成 commonjs 或者 commonjs2 时使用才有意义output.libraryTarget
配置以何种方式导出库,是字符串的枚举类型,支持以下配置libraryTarget | 使用者的引入方式 | 使用者提供给被使用者的模块的方式 |
---|---|---|
var | 只能以script标签的形式引入我们的库 | 只能以全局变量的形式提供这些被依赖的模块 |
commonjs | 只能按照commonjs的规范引入我们的库 | 被依赖模块需要按照commonjs规范引入 |
commonjs2 | 只能按照commonjs2的规范引入我们的库 | 被依赖模块需要按照commonjs2规范引入 |
amd | 只能按amd规范引入 | 被依赖的模块需要按照amd规范引入 |
this | ||
window | ||
global | ||
umd | 可以用script、commonjs、amd引入 | 按对应的方式引入 |
编写的库将通过var
被赋值给通过library
指定名称的变量。
{
output: {
path: path.resolve("build"),
filename: "[name].js",
+ library:'calculator',
+ libraryTarget:'var'
}
}
module.exports = {
add(a,b) {
return a+b;
}
}
var calculator=(function (modules) {}({})
<script src="bundle.js"></script>
<script>
let ret = calculator.add(1,2);
console.log(ret);
</script>
exports["calculator"] = (function (modules) {}({})
let main = require('./main');
console.log(main.calculator.add(1,2));
require('npm-name')['calculator'].add(1,2);
npm-name是指模块发布到 Npm 代码仓库时的名称
module.exports = (function (modules) {}({})
require('npm-name').add();
在 output.libraryTarget 为 commonjs2 时,配置 output.library 将没有意义。
this["calculator"]= (function (modules) {}({})
this.calculator.add();
window["calculator"]= (function (modules) {}({})
window.calculator.add();
global["calculator"]= (function (modules) {}({})
global.calculator.add();
(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_;
});