参考：中文文档：https://www.webpackjs.com/
一、入门 | Demo
当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要(依赖)的每个模块(modules)，然后将所有这些模块打包成一个或多个 assets。
操作 - 创建package.json文件
- 1、创建一个webpack的项目根目录（如wptest），然后在根目录进行命令行操作：
npm init -y 初始化一个package.json文件
然后将webpack安装在本地 npm i -D webpack
注意：
- 不推荐使用全局安装
- 超过4.0的webpack版本，需要额外再安装一个webpack-cli 命令行工具
npm install --save-dev webpack
完成安装之后如下如所示：
- 2、在根目录下方新建如下文件夹与文件（dist 、src、index.html、index.js）：
- 3、接着，我们做一些尝试：使用loadsh工具库写一个小测试：首先先安装 开发依赖 loadsh 工具库
npm i lodash -P
lodash 参考：https://www.lodashjs.com/
然后在````index.js```文件中写如下代码：
import _ from 'lodash';
let createDomElement = ()=>{
let dom = document.createElement('div');
dom.innerHTML = _.join(['https://','blog','.csdn','.net','/imaginecode'],'');
return dom;
}
document.body.appendChild(createDomElement());
接着，在index.html文件中写入：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<body>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
- 4、在根目录下添加
webpack.config.js，编写webpack.config.js文件
webpack.config.js遵循Nodejs
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname,'./dist')
}
}
- 5、执行webpack
npx webpack进行构建
你可以在package.json 的scripts下加入"build":"npx webpack"
以后就只需要执行 npm run build
执行成功后，然后我们在浏览器中打开index.html
二、一些webpack概念
前面我们用一个小Case让大家了解了一下Webpack。下面，我们在开始进一步完善我们的Case前，需要先知道一些webpack的先验知识/概念。这些概念也可以在Case的进行中在https://www.webpackjs.com/中文文档中进行查阅。
npm 与 package.json
- –save-dev 安装的 插件，被写入到 devDependencies 对象里面去
- –save 安装的插件，被写入到 dependencies 对象里面去
- devDependencies 里面的插件只用于开发环境，不用于生产环境
- dependencies 是需要发布到生产环境(production)
webpack.config.js
配置大都是在导出的模块（module.exports）对象体中完成的：
module.exports = {
}
- mode 开发模式
module.exports = {
mode: 'production', //设置开发模式为生产模式
}
- entry入口文件
module.exports = {
mode: 'production',
entry: { //入口文件
app:'./src/index.js',
},
}
入口配置，告诉webpack应该从哪个模块开始（上面从src/index.js这个模块），作为构建内部依赖图的开始。可以配置多个。
- output 输出文件
module.exports = {
mode: 'production',
entry: {
app:'./src/index.js',
print:'./src/print.js'
},
output: { //输出文件
filename: '[name].bundle.js', //如何命名
path:path.resolve(__dirname,'./dist') //在哪里输出bundles
},
output属性，则是告诉webpack在哪里(path)输出它所创建的assets(或者说bundles),并告诉Webpack要怎样命名这些文件(filename)。
module 模块
module 模块中的选项决定了如何处理项目中不同类型的模块。
- module.noParse ：RegExp | [RegExp] | function
这项能防止webpack解析与给定的正则表达式相匹配的文件。需要注意的是，不进行解析的文件中不能含有import,require,define等其他导入机制。通常，我们可以选择不对大文件库进行解析，如jquery。
- module.rules
rules，顾名思义，是一种规则数组。即，当创建模块时，根据规则数组进行匹配。同时，这些规则能够对模块应用loader等。
- module.rules.test: Condition
Condition一般提供一个正则表达式或者正则表达式数组RegExp | [RegExp]
同时还有其他条件，如：{include:Condition} ：匹配特定条件，一般是提供一个字符串或者字符串数组。{exclude:Condition} ：排除特定条件。一般是提供一个字符串或字符串数组。{and: [Condition]} ：必须匹配数组中的所有条件。{ or: [Condition] }: 匹配数组中任何一个条件。{ not: [Condition] }: 必须排除这个条件。
module: {
rules: [
{
test: /\.css$/,
include: [
path.resolve(__dirname, "app/styles"),
path.resolve(__dirname, "src/styles")
],
use: ['style-loader', 'css-loader']
}
]
}
- rules.use
告诉模块要使用哪个loader。若有多个loader的话，从右向左（从下到上）进行应用。
use: [
'style-loader',
{
loader: 'css-loader'，
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
}
];
- loader
原本，webpack是只能处理javascript文件的，但这样的话，岂不是很不爽？！ 所以，loader来了，它能让webpack去处理非javascript文件。
简单理解，loader将所有类型的文件（如css、scss、png、jpg、…等类型）进行转换，转换为webpack能处理的模块。
如css-loader转换css文件 :
使用前先安装 npm i -D css-loader
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'css-loader',
options: {
sourceMap: true
}
}
]
}
- plugins 插件
如果将loader理解为转换某些类型的模块，那么plugins能处理的任务可不止这些。如打包、压缩，定义环境变量…插件能用来处理各种各样的任务。