序言
Webpack 是现代 JavaScript 应用程序的强大模块打包工具。它还可以将多个模块打包到一个或多个静态资源文件中，供浏览器加载。在 Webpack 中，加载器在处理所有类型的文件和资源方面起着至关重要的作用。本文将介绍一些常用的 WebpackLoader 并提供相应的示例代码，以帮助读者更好地理解 Loaded 的使用。
通天塔装载机
Babel 是一个广泛使用的 JavaScript 编译器，用于将新版本的 JavaScript 代码转换为可以在旧浏览器中轻松运行的向后兼容版本。BabelLoader 是 Webpack 的一个插件，它将 ES6+ JavaScript 代码转换为打包过程中与浏览器兼容的代码。下面是一个简单的 Webpack 配置示例，使用 BabelLoader：
module.exports = {
// ...
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},
};
CSSLoader 和 StyleLoader
CSSLoader 和 StyleLoader 是用于处理 CSS 文件的常用加载器。CSSLoader 用于加载 CSS 文件，而 StyleLoader 用于将 CSS 代码注入 HTML 页面。下面是一个示例代码片段，演示了如何在 Webpack 中使用这两个加载器：
module.exports = {
// ...
module: {
rules: [
{
test: /.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
};
文件加载器文件
加载器用于处理文件资源使用webpack打包，如图像、字体等。它将文件复制到输出目录并返回要使用的相对路径。以下是使用文件加载器处理图像文件的示例 Webpack 配置：
module.exports = {
// ...
module: {
rules: [
{
test: /.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[contenthash].[ext]',
outputPath: 'images',
},
},
],
},
],
},
};
SassLoader
SassLoader用于将Sass（SyntactallyAwesomeStylesheets）文件编译为CSS文件。以下是使用 SassLoader 处理 Sass 文件的示例 Webpack 配置：
module.exports = {
// ...
module: {
rules: [
{
test: /.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
],
},
};
更少装载机
LessLoader用于将Less文件编译为CSS文件。下面是一个使用 LessLoader 处理 Less 文件的 Webpack 配置示例：
module.exports = {
// ...
module: {
rules: [
{
test: /.less$/,
use: ['style-loader', 'css-loader', 'less-loader'],
},
],
},
};
PostCSSLoader
PostCSSLoader 用于在打包过程中转换和优化 CSS，例如手动添加浏览器前缀、压缩 CSS 等。以下是使用 PostCSSLoader 的 Webpack 配置示例：
module.exports = {
// ...
module: {
rules: [
{
test: /.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
],
},
};
网址洛阿德
URLLoader 可以将文件转换为 base64URL 并将其嵌入到打包文件中使用webpack打包，从而减少对外部资源的请求次数。以下是使用 URLLoader 处理图像文件的 Webpack 配置示例：
module.exports = {
// ...
module: {
rules: [
{
test: /.(png|jpe?g|gif|svg)$/i,
type: 'asset',
},
],
},
};
XMLLoader
XMLLoader 用于加载和解析 XML 文件。以下是使用 XMLLoader 处理 XML 文件的示例 Webpack 配置：
module.exports = {
// ...
module: {
rules: [
{
test: /.xml$/,
use: ['xml-loader'],
},
],
},
};
CSVLoader
CSVLoader 用于加载和解析 CSV 文件。以下是使用 CSVLoader 处理 CSV 文件的示例 Webpack 配置：
module.exports = {
// ...
module: {
rules: [
{
test: /.csv$/,
use: ['csv-loader'],
},
],
},
};
JSONLoader
JSONLoader 用于加载和解析 JSON 文件。以下是使用 JSONLoader 处理 JSON 文件的示例 Webpack 配置：
module.exports = {
// ...
module: {
rules: [
{
test: /.json$/,
use: ['json-loader'],
},
],
},
};
VueLoader
VueLoader 是一个用于加载和解析 Vue 单文件组件的加载器。下面是一个使用 VueLoader 处理 Vue 单文件组件的示例 Webpack 配置：
module.exports = {
// ...
module: {
rules: [
{
test: /.vue$/,
use: ['vue-loader'],
},
],
},
};
降价加载器
MarkdownLoader用于将Markdown文件转换为HTML。以下是使用 MarkdownLoader 处理 Markdown 文件的示例 Webpack 配置。
module.exports = {
// ...
module: {
rules: [
{
test: /.md$/,
use: ['html-loader', 'markdown-loader'],
},
],
},
};
ESLintLoader
ESLint 是一个用于检测和标准化 JavaScript 代码风格的工具。ESLintLoader 可以在 Webpack 构建过程中手动运行 ESLint，并帮助我们检测代码错误和样式问题。以下是使用 ESLintLoader 的 Webpack 配置示例：
module.exports = {
// ...
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
enforce: 'pre',
use: ['eslint-loader'],
},
],
},
};
TypeScriptLoader
TypeScript 是一种用于静态类型检测的 JavaScript 超集语言。TypeScriptLoader可以将TypeScript文件编译成JavaScript文件。以下是使用 TypeScriptLoader 处理 TypeScript 文件的示例 Webpack 配置：
module.exports = {
// ...
module: {
rules: [
{
test: /.ts$/,
exclude: /node_modules/,
use: ['ts-loader'],
},
],
},
};
字体加载器字体加载器用于处理字体文件
，如字体格式转换、文件路径处理等。以下是使用 FontLoader 处理字体文件的示例 Webpack 配置：
module.exports = {
// ...
module: {
rules: [
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader'],
},
],
},
};
网络包，
在项目中使用了一段时间，得益于其多功能支持和配置定制，从本地编译和依赖管理中得到了很多帮助。配置和架构构建完成后，开发过程不能再关注开发过程中的工程问题的组织、加载、转义、合并、精简、兼容性等方面的问题，所有这些都由 Webpack 处理。效率和体验得到了极大的提高。本文是总结和沉淀使用 Webpack 过程中的关键配置和方法。
本文是一些零散的功能记录、关键点配置和技巧，大部分是从使用过程中总结出来的，不是指南翻译或者介绍性讲解，刚开始 Webpack 或者遇到使用中出现问题的朋友可以看看是不是刚好解决了你的问题使用webpack打包，如果有老司机，也欢迎大家强调一下错误。
1. 复杂项目配置为正确放置 - 节点 API：
Webpack 配置方法中，简单的项目可以通过 webpack.config 的副本保存.js配置文件。而 webpack.config.js 可以链表的形式返回多个配置，当执行打包命令时，它会遍历每个配置来执行多个打包。
但是，在复杂项目（如同构项目）中，需要针对不同的环境自定义配置，并且编写配置文件的方式可以延伸。这时可以直接使用 Node API 运行，从使用配置文件到使用配置函数或类灵活生成。比如一个构建脚本可以这样写（文中部分代码是为了方便读者复制不翻图片，请原谅我浏览折叠）：
./build.js：
var webpack = require('webpack');
var configGen = require("./config.generator");
//通过参数生成定制配置，例如通过 process.argv 接收参数
var config = configGen(options);
var compiler = webpack(config);
compiler.run(function(err, stats) {
if(err){
console.err(err)
}else{
console.log(stats.toString({
//终端显示带上颜色
colors:true
}))
}
});然后直接使用 npm 脚本运行就很方便了：.
/package.json：
{
"scripts": {
"build": "node ./build.js"
}
}执行：
npm run build或者在开发时使用 webpack-dev-server 进行本地服务器动态更新，非常灵活：
var webpack = require('webpack');
var webpackDevServer = require('webpack-dev-server');
var configGen = require("./config.generator");
var config = configGen(options);
var compiler = webpack(config);
var server = new webpackDevServer(compiler,{
contentBase: __dirname,
stats: { colors: true }
});
server.listen(8081);二、关于加载器配置：
加载程序可以用代码编写或在配置中设置。建议将通用加载器放置在配置中，以减少代码中的特殊性。否则，如果您以后必须迁移，这将很麻烦。
例如，使用 Babel-loader 配置 .jsx 文件以支持 React 和 ES6，并传递一些参数以打开更多 Babel 插件：
module:{
loaders:[
{
test: /.jsx$/,
include: path.resolve(__dirname, "lib"),
loader: "babel-loader",
//query用于向loader传递参数，不同loader接收参数不一样
query: {
presets: ['react', 'es2015'],
plugins: [
"syntax-object-rest-spread",
"transform-object-rest-spread"
],
cacheDirectory: true
}
},
]
}如果你有一些加载器需要提前执行（比如CMD到AMD兼容的处理，如果不及早处理依赖解析就会有问题），可以使用module.preloaders，配置和module.loaders一样。
如果使用一些自写的加载器，你想设置别名而不是直接写入相对路径，这与模块的其他名称（在 resolve.alias 中设置）不同，你需要在 resolveLoader.alias 中设置加载器的别名：
resolveLoader: {
alias: {
"seajs-loader": path.resolve( __dirname, "./web_modules/seajs-loader.js" )
}
}如果您的项目有一个模块引用其上方的根路径（依赖项路径位于根路径上方），则可能找不到加载器，并且需要在 resolveLoader.root 中自动指定加载器的默认位置：
resolveLoader: {
//指定默认的loader路径，否则依赖走到上游会找不到loader
root: path.resolve( __dirname, './node_modules' )
}3. 关于全局模块/全局变量/环境变量：
如果你习惯使用全局模块，比如jQuery的$，并且不想每次都写$=require（'jquery'），你可以使用ProvidePlugin插件：plugin
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]如果你的代码有一个需要插入的静态全局变量，或者需要一个环境变量来区分的分支，你可以使用 DefinePlugin 插件插件插入一个静态环境变量，插入的变量会在编译时进行处理：
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify( options.dev ? 'development' : 'production' )
},
"__SERVER__": isServer ? true : false
})
]编译前：
编译后（假设开发环境）：
此时，无法到达的部分（.log'prod'）已经可以通过静态分析获得，无用的代码将通过Uglify压缩消除：
4. 关于公共文件打包的配置：
如果是多条目页面项目，则多个条目之间可能存在一些通用的库（基库等），应使用公共文件提取和打包来提高缓存的使用。该手册清楚地表明它是使用CommonsChunkPlugin插件处理的。这个插件支持多种参数和设置，我更喜欢下面的对象传递，这样就可以指定多个包的生成：
entry: {
a:"./a.js",
b:"./b.js",
common1:[
//以下库文件及其下游依赖都会被打到 common1 中
"./lib/common.js",
"react", "react-dom", "redux", "react-redux", "redux-thunk",
"react-router", "react-router-redux"
],
},
plugins:[
new webpack.optimize.CommonsChunkPlugin({
//可以指定多个 entryName，打出多个 common 包
names: ['common1'],
minChunks: Infinity
}),
}制作文件：
在这种情况下使用webpack打包，当引用 a.js 或 b.js 中的 common1 包中包含的库及其依赖项时，它们将不再重复打包到各自的捆绑包中。（注意：页面上捆绑包的加载顺序为：common1 = > a/b）。
关于 DllPlugin（清单）：
DllPlugin是一种比commonsChunkPlugin更独立的打包形式。名副其实，相当于独立将文件输入第三方库使用。该方法适用于处理一些不经常更改的第三方库（尤其是小型框架源码等），独立打包，仅通过生成的清单文件引用其中的模块，而不必在每次编译项目时重新编译打包此内容。因为这些通常不会改变。使用 DllPlugin 打包
有两个步骤，一个是使用 DllPlugin 打包需要分离的库文件。下面是一个单独的 webpack 打包过程和配置：
例：
./配置.dll.js
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry:{
vendor: [ "react", "react-dom", "redux", "react-redux", "redux-thunk", "react-router", "react-router-redux" ]
},
output:{
filename:'[name].dll.js',
path:path.resolve( __dirname, './output/dll' ),
library:"[name]"
},
plugins:[
new webpack.DllPlugin({
path:path.resolve( __dirname, './output/dll/[name]-manifest.json'),
name:"[name]"
}),
new webpack.optimize.UglifyJsPlugin({ minimize: true, output: {comments: false} })
]
}单独包装
webpack --config=config.dll.js打包后，不仅会生成所谓的 DLL 库文件，还会生成一个强调 DLL 文件中包含的模块列表的 manifest.json 文件。
供应商.dll.js：
vendor-manifest.json：
在第二步中，使用 DllReferencrPlugin 引用项目中的 DLL 库文件：
plugins:[
new webpack.DllReferencePlugin({
context:__dirname,
manifest: require( './output/dll/vendor-manifest.json' )
})
]这样，每当遇到 manifest.json 文件中存在的模块时，它都不会打包到项目中，而是会运行到指定的 DLL 库进行查找（page
发表评论