参考：中文文档：https://www.webpackjs.com/
1️⃣. 引入 | 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
2️⃣. 一些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能处理的任务可不止这些。如打包、压缩，定义环境变量…插件能用来处理各种各样的任务。
3️⃣. 接着写小Case
加载CSS文件
- 安装：使用style-loader(把js中引入的css内容注入到Html < style >标签中，其依赖css-loader) 和css-loader(解析js中import 的css文件)可以解析css和style
npm i -D style-loader css-loader - 添加loader
const path = require('path'); module.exports = { entry: { app:'./src/index.js', }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] //从右向左应用到模块 } ] } };
- 添加 /src/style.css
.c-red {color:red;}
- index.js修改
import _ from 'lodash'; import './style.css' let createDomElement = ()=>{ let dom = document.createElement('div'); dom.innerHTML = _.join(['https://','blog','.csdn','.net','/imaginecode'],''); dom.className = 'c-red'; return dom; } document.body.appendChild(createDomElement());
加载sass(scss)文件 、配置sourceMao
- 安装:
npm i -D sass-loader node-sass webpack - 添加loader
module: { rules: [{ test: /\.scss$/, use: [{ loader: "style-loader" }, { loader: "css-loader", options: { sourceMap: true //利于开发调式，定位文件 } }, { loader: "sass-loader", options: { sourceMap: true } }] }] }
添加PostCSS
postcss 可以利用为CSS3属性添加前缀的方式实现CSS的模块化，防止样式冲突。这也是常用的方式。 参考文档：
https://postcss.org/
- 安装：
npm i -D postcss-loader autoprefixer - webpack.config.js 添加loader
... const autoprefixer = require('autoprefixer'); ... module: { rules: [ { test: /\.(sa|sc|c)ss$/, use: [ 'style-loader', { loader: 'css-loader', options: { sourceMap: true } }, { loader: 'postcss-loader', options: { ident: 'postcss', sourceMap: true, plugins: loader => [ require('autoprefixer')({ browsers: ['> 0.15% in CN'] }) // 添加前缀 ] } }, { loader: 'sass-loader', options: { sourceMap: true } } ] } ] }
