Webpack基础配置
中文文档：https://webpack.docschina.org/
写在前面：
-
最好在文件夹中安装 webpack、webpack-cli，尽量不要使用全局安装 webpack、webpack-cli。全局的卸载：npm uninstall webpack webpack-cli -g
-
如果我们转移了文件夹，那么在转移之后进入项目，一定要打开终端 npm install，否则会有各种包的缺失。
一、安装与初始化
1. 全局安装 webpack 和 cli
npm i webpack webpack-cli -g
2. mkdir demo（新建文件夹 demo）
3. cd demo （进入文件夹 demo）
4. 包初始化
npm init -y （-y是默认配置）
5. 本地安装 webpack webpack-cli
npm i webpack webpack-cli --save-dev（开发模式）
6. 初始化（在 src 目录下）
(1) 新建入口文件 index.js
import data from './data.json'
function add (a, b) {
return a + b;
}
console.log(add(1, 2));
console.log(data);
(2) data.json
{
"name": "chen"
}
(3) 新建模板文件 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./music.png" alt="音乐">
</body>
</html>
二、打包初体验
1. webpack打包初体验（开发环境）
webpack ./src/index.js -o ./dist/bundle.js --mode=development
注意：-o 表示 output 输出（./dist/bundle.js 就是输出的位置和 js 名称），--mode=development 表示指定模式 mode 为开发模式 development。（= 可以省略，直接写 --mode development 也可以）
2. 测试 bundle.js
使用打包的 bundle.js，根目录新建一个 index.html，在 script 标签中引入 bundle.js
3. 生产环境下的打包
webpack ./src/index.js -o ./dist/bundle_production.js --mode=production
4. 补充
(1) webpack 默认可以处理js文件、json文件，对于其他文件需要借助 loader 包来转换才能识别。
(2) 生产环境比开发环境多了压缩代码和代码混淆。
三、配置文件
通过配置文件（webpack.config.js）来打包。
1. 根目录下新建 webpack.config.js
let path = require('path'); // node 的 path 模块，可以获取当前目录位置
module.exports = {
// 入口文件
entry: './src/index.js',
// 输出文件
output: {
// 输出文件名称
filename: 'bundle.js',
// filename: '[chunkhash].js'
// 指定输出路径（绝对路径）__dirname 表示当前具体的目录
// path.resolve()的作用是整合目录
path: path.resolve(__dirname, 'dist'),
},
// 模式（development（开发） / production（生产））
mode: 'development'
}
以上，配置了入口文件、输出路径、打包模式。
注意： 输出文件位置的文件名称可以设置为 chunkhash 值。（但是会和 --hot 指令冲突）
例如：
filename: '[chunkhash].js'
2. webpack 命令的简写
因为在配置文件中设置了 mode，因此打包时不必再输入 --mode=development
输入：webpack ./src/index.js -o ./dist/bundle.js
或者直接：webpack
注意： 因为配置文件中设置的 mode 是开发环境，因此默认打包出来的就是开发环境下的打包文件。
但是，如果想要生产环境的打包文件，那么只要在后面加上 --mode=production 即可。（ = 等号可以省略）
webpack --mode=production
四、loader 配置（样式打包）
用 loader 对 css 文件打包（样式打包）
1. 新建 style.css
body {
background-color: #abcdef;
}
2. 在 index.js 中导入：import './style.css'
// 入口文件：./src/index.js
import './style.css'
js 是不可以识别 css 的，因此为了让 css 变成 js，就要用到 loader 了。
3. loader 配置
// webpack.config.js
mododule.exports = {
// ...
module: {
rules: [
{
test: /\.css$/,
// use 数组中 loader 的转换顺序是从下到上！！！ style(css(xxx.css))
// css-loader 表示将 css文件转换成 js 文件；
// style-loader 表示将 js 的样式内容插入 style 标签中。
use: ['style-loader','css-loader']
}
]
}
}
(1) 然后打包，发现报错，需要引入 style-loader 包。
npm i style-loader --save-dev
(2) 引入后，重新打包，报错说缺少 css-loader，继续引包。
npm i css-loader --save-dev
(3) 重新打包编译，正常执行。
webpack
五、plugins 插件（html 模板）
使用 plugins 插件完成 html 模板的打包，作用是将所有文件都打包编译放在一起。
1. 引入 html-webpack-plugin 模块
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过npm安装
2. 安装依赖
npm i html-webpack-plugin --save-dev
3. plugins配置
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'}) // 哪个 html 文件作为模板？
],
4. 重新编译打包
webpack
六、图片资源打包（需要文件加载器 file-loader）
1. 配置图片规则、html模板规则
// webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
test: /\.(jpe?g|png|gif)$/,
use: [
// 图片规则
{
loader: 'url-loader',
options: {
limit: 2048, // 图片大小限制 2kb，减少请求数量，但转换后体积会变大
esModule: false, // 关闭 url-loader 的 es6 模块化解析
// [name] 表示原来的图片名称，[hash:7] 表示取图片hash的前七位，[ext] 表示文件后缀
name: '[name].[hash:7].[ext]'
}
},
// html 规则
{
test: /\.html$/,
use: [
{ loader: 'html-loader' }
]
}
]
}
},
]
}
}
2. 安装依赖
npm i file-loader --save-dev （处理图片文件前必须要安装的文件加载器）
npm i url-loader html-loader --save-dev
七、配置：热加载（热更新）
热加载是什么？就是可以进行修改内容时的同时，同步修改的变化，不用每次改完数据都要自己手动去刷新页面，方便于开发。
1. 配置开发环境服务器
// webpack.config.js
module.exports = {
// ...
devServer: {
// 项目构建的基准路径
contentBase: path.resolve(__dirname, 'dist'),
// 启动gzip编码压缩
compress: true,
// 端口号
port: 3000,
// 是否自动打开浏览器
open: true
}
}
2. 安装依赖
npm i webpack-dev-server -g
3. 开启热加载
webpack-dev-server
八、npm script 设置（快捷指令）
1. 指令添加
为了方便调试，我们可以在 package.json 中添加命令。
// package.json
"script": {
"dev": "webpack --mode development", // 开发环境打包
"build": "webpack --mode production", // 生产环境打包
"server": "webpack-dev-server --mode development", // 热加载，实时更新，便于开发（不会打包）
"watch": "webpack --mode production --watch" // 观察者模式：随时自动构建
}
2. 使用
在命令行中输入：npm run 对应指令
例如启动热加载：
npm run server
九、插件：打包进程显示
在打包时，显示打包的进程。
// webpack.config.js
const webpack = require('webpack'); // 从 node 中提取 webpack 包
module.exports = {
plugins: [
new webpack.ProgressPlugin()
]
}
十、babel-loader
将 js 文件编译成 es5 规范，提升兼容性。
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/, // 不对npm文件夹进行转换
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
]
},
]
}
}
(1) exclude 表示某些文件不需要进行 babel 的匹配。比如 node_module 目录。
(2) presets 表示 babel-loader 的预处理，用@babel/preset-env自定适应版本。
注意需要安装三个重要的依赖：（ babel-loader @babel/core @babel/preset-env ）
npm install babel-loader @babel/core @babel/preset-env --save-dev
其中，@babel/core 用来分析 es 语法，@babel/preset-env 表示让目标环境自动适应 es 的最新版本 。
- 关于@babel/preset-env更多：https://blog.windstone.cc/es6/babel/@babel/preset-env.html
十一、sass-loader
sass 语法的匹配，将 sass 语法编译成 css 语法后再变成 style 写进 html 模板。
1. sass 文件的创建和引入
创建一个 .scss 文件
// src目录下
div {
h2 {
width: 100px;
height: 50px;
line-height: 50px;
background-color: blue;
}
}
2. 在入口文件中引入
// src/index.js
import './style.scss'
3. 规则配置
// webpack.config.js
module.exports = {
module: {
rules: [
{test:/\.scss$/, use:['style-loader','css-loader', 'sass-loader']}
]
}
}
style( css( sass( style.scss ) ) )
4. 安装依赖
npm i sass-loader node-sass --save-dev
5. 补充：sass 和 scss 的区别？
sass 和 scss 其实是一样的 css 预处理语言，其后缀名是分别为 .sass 和 .scss 两种。
SASS版本 3.0 之前的后缀名为 .sass，而版本 3.0 之后的后缀名 .scss。
两者是有不同的，继 sass 之后 scss 的编写规范基本和 css 一致，sass 时代是有严格的缩进规范并且没有 {} 和 ;
而 scss 则和 css 的规范是一致的。
十二、插件：css 压缩
插件：mini-css-extract-plugin 生成 link 标签，比 style 标签灵活。
https://webpack.js.org/plugins/mini-css-extract-plugin/
1. 安装依赖
npm install --save-dev mini-css-extract-plugin
2. 配置插件
// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [
// ...
new MiniCssExtractPlugin()
],
}
3. 配置规则
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}
]
}
}
这样，就把原来的 style 标签换成了 link 标签，压缩了代码，提高了性能。
十三、插件：文件可视化
可以清晰地看到每个文件打包后的大小，方便文件的优化。
https://www.npmjs.com/package/webpack-bundle-analyzer
1. 安装依赖
npm install --save-dev webpack-bundle-analyzer
2. 配置插件
// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
}
3. 使用
以后在执行任意 npm 命令后，都会显示文件的大小分布。
十四、插件：文件压缩
https://webpack.js.org/plugins/compression-webpack-plugin/
1. 安装依赖
npm install compression-webpack-plugin --save-dev
2. 配置插件
// webpack.config.js
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
plugins: [
new CompressionPlugin()
]
}
十五、配置：源文件映射
在调试代码时，因为受打包的影响，控制台报告的代码位置会与想要得到的位置相去甚远，这时候就要用到 sourcemap，消除这种影响。
https://webpack.js.org/configuration/devtool/
// webpack.config.js
module.exports = {
devtool: 'source-map'
}
当添加了这个配置选项后，运行编译打包后，输出文件中就会出现 .map 文件，这个文件保存着映射关系，保证我们访问的是源代码文件。（但是会产生一些性能问题，影响打包编译的速度。建议在生产环境中使用。）
