【慕课网】从基础到实战 手把手带你掌握新版Webpack4.0
讲师：Dell 课程：https://coding.imooc.com/class/chapter/316.html#Anchor
webpack 的两种安装方式
- 全局安装
npm install webpack webpack-cli -g
尽量不要全局安装，因为有时不同的项目是用不同版本的 webpack 打包的
卸载 webpack
npm uninstall webpack webpack-cli -g
在命令行输入
webpack -v
检验是否安装成功
- 在项目内安装
npm install webpack webpack-cli -D
或
npm install webpack webpack-cli --save-dev
“–save-dev"等价于”-D"
在命令行输入
npx webpack -v
检验是否安装成功，使用 npx 是在当前目录下找命令
安装固定版本号的 webpack
npm install webpack@XX.XX.XX webpack-cli -D
安装前可以输入
npm info webpack
检验该版本是否存在
更改 webpack 的配置文件
webpack 的默认配置文件是 webpack.config.js，如果要将它改成 webpackconfig.js，需要执行下条命令
npx webpack --config webpackconfig.js
模块导出/引入方式
- 模块导出
//ES Moudule 模块导出方式
export default Header;
//CommonJS 模块导出
module.exports = Header;
- 模块引入
//ESMoudule 模块引入方式
import Header from ('./header.js');
//CommonJS 模块引入方式
var Header = require('./header.js');
用 npm script 简化打包代码
添加了配置文件 webpack.config.js 后，可以用
npx webpack
运行 webpack 打包文件，我们尝试在项目的 package.json 的 scripts 条目中添加一条：
"scripts": {
"bundle":"webpack"
},
这样就可以用
npm run bundle
来执行文件打包了
loader 的执行顺序
当一个类型使用多个 loader 时，loader 的执行顺序是从下到上、从右到左的，例如：
{
test: /\.scss$/,
use: ['style-loader','css-loader','sass-loader']
}
首先执行 sass-loader 对 sass 文件进行翻译,翻译成 css 代码给到 css-loader 处理，处理好再给 style-loader 挂载到页面上
postcss-loader
自动添加厂商前缀
先安装 postcss-loader
npm i -D postcss-loader
再安装 autoprefixer 插件
npm install autoprefixer -D
添加 postcss-loader 配置文件
postcss.config.js
module.exports = {
plugins: [require("autoprefixer")],
};
再启动打包
css-loader 的 options 相关值
- importLoaders css-loader 中的 importLoaders，表示通过 import 引入的类型文件，也要其他 loader 打包一下，例如
loader:'css-loader',
options:{
importLoaders:2
}
表示要用下面的两个 loader 先打包再用 css-loader 打包
- modules
当设置为 true 时，表示 css 可模块化,在文件中引入 css 文件时，可以这样引入
import style from './index.scss';
使用 index.scss 中的类名设置样式时，可以这样使用
img.classList.add(style.avatar);
使用 webpack 打包字体文件
对于字体文件，即后缀为 eot、ttf、svg 的文件，打包时用 file-loader
webpack 插件——plugin
plugin 可以在 webpack 运行到某个时刻的时候，帮你做一些事情，类似 vue 的生命周期函数
- html-webpack-plugin 会在打包结束后自动生成一个 html 文件，并把打包生成的 js 自动引入到这个 html 文件中，但是这个 html 文件并没有相关标签，如果要有相关标签的话，要进行配置，如下： 先安装
npm install html-webpack-plugin
然后在 webpack.config.js 里面进行配置
const HtmlWebpackPlugin = require("html-webpack-plugin");
plugins: [
new HtmlWebpackPlugin({
template: "src/index.html",
}),
];
template 的属性值是模板的路径，模板代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>html模板</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
- clean-webpack-plugin 当重新打包之前，可以把上一次打包的目录都删除，在 webpack.config.js 里面的配置如下
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
plugins:[
new CleanWebpackPlugin()
],
output 配置项——publicPath
如果静态资源放在 cdn 上，可以设置该配置
SourceMap 的配置
在 mode 为 development 即开发者模式下，SourceMap 已经配置好了
SourceMap 是一个映射关系，它知道打包出错的的文件对应未打包的文件的错误位置
将 webpack.config.js 中添加一个属性如下：
mode: 'development',
devtool:'source-map',
这样打包后的代码出错，在控制台可以直接进入到源文件的错误位置