WebPack4.x学习笔记
视频推荐：https://www.bilibili.com/video/av51579321/?p=10
WebPack官网：https://webpack.js.org/（尽量看英文的，中文版本的有些没及时更新）
课时1 webpack4介绍
1.webpack4新特性
webpack需要设置mode属性，可以是development或production.例如：webpack --mode development
webpack针对development-开发模式的特性
1）浏览器调试工具
2）注释、开发阶段的详细错误日志和提示
3）快速和优化的增量构建机制
webpack针对production-生产模式提供的特性
1）开启所有的代码优化
2）更小的bundle大小
3）去除掉只有开发阶段运行的代码
4）Scope hosting和Tree-shaking
2.插件和优化
webpack4删除了CommonsChunkPlugin插件，它使用内置APIoptimization.splitChunks和optimization.runtimeChunk,
这意味着webpack会默认为你生成共享的代码块。（还有其他几个）
3.开箱即用WebAssembly,wasm会带来性能的大幅提升，允许浏览器运行二进制文件，可以通过编写loaders来直接import C++、C或Rust。
4.支持多种模块类型
共5种：
javascript/auto:在webpack3里，默认开启对所有模块系统的支持，包括CommonJS、AMD、ESM。
javascript/esm:只支持ESM这种静态模块。
javascript/dynamic:只支持CommonJS和AMD这种动态模块。
json:支持支JSON数据，可以通过require和import来使用。
webassenbly/experimental:只支持wasm模块，目前处于试验阶段。
5.0CJS 含义是0配置，webpack4受Parcel打包工具启发，尽可能的让开发者运行项目的成本变低。为了做到0配置，webpack4不再强调
需要webpack.config.js作为打包的入口配置文件了，它默认的入口为'./src/'和默认出口'./dist',对小项目而言是福音。
6.新的插件系统
webpack4对插件系统进行了不少修改，提供了针对插件和钩子的新API.
变化如下：
1）所有的hook由hooks对象同一管理，它将所有的hook作为可扩展的类属性。
2）当添加插件时，必须提供一个插件名称。
3）开发插件时，可以选择sync/callback/prpmise作为插件类型。
4）可以通过this.hooks = {myHook:new SyncHool(...)}来注册hook了。
注意点：当使用webpack4时，确保使用Node.js的版本>=8.9.4。因为webpack4使用了很多JS新的语法，他们在新版本的v8里经过了优化。
课时2 安装与基本命令
npm install webpack-cli -g
npm install webpack -g
webpack --mode development xxx.js -o bundle.json
课时3 配置文件_入口出口
//单个文件
const path = require('path');
module.exports = {
entry: './input.js',
output: {
path: path.resolve(__dirname,'dist'),
filename: 'output.bundle.js'
}
};
//多个文件
module.exports = {
entry: {//多个打包入口
home: './home.js',
about: './about.js',
other: './other.js',
},
output: {
path: path.resolve(__dirname,'dist'),
filename: '[name].bundle.js'
},
mode:'development',//其它参数production
};
课时4 加载器_url-loader
loaders用来对源文件预处理，处理成浏览器能执行的文件。
const path = require('path');
module.exports = {
entry: './input.js',
output: {
path: path.resolve(__dirname,'dist'),
filename: 'output.bundle.js'
},
mode:'development',
module:{
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 18192 //限制图片的大小，如果图片大小在限制范围内，则打包时转化为base64,否则还是普通的物理文件
}
}
]
}
]
}
};
npm init -y //生成package.json
npm install url-loader -S //安装url-loader,-S是安装完url-loader之后记录到package.json中
npm install file-loader -S //使用url-loader同时需要安装file-loader
课时5 加载器babel-loader
把ES6代码（ES2015、ES2016、ES2017、ES2018）转化为浏览器(主要指的是低版本的浏览器，高版本的google浏览器支持大部分ES6语法规则)支持的ES5代码，Angular/Vue/React都需要用到babel-loader。
安装：npm install -D babel-loader @babel/core @babel/preset-env webpack
module: {
rules: [
{
test: /\.m?js$/, //正则
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-object-rest-spread'] //添加支持的插件，如支持React语法规则，注意：正则需要扩展文件的扩展名
}
}
}
]
}
课时6 加载器sass-loader
将sass 转化为css 并打包到js文件中。
安装：npm install sass-loader node-sass webpack --save-dev或者cnpm install sass-loader node-sass -D
同时需要安装：cnpm install style-loader css-loader -D
配置文件：
module: {
rules: [{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
}]
}
sass 可理解为可编程css,如：
$color:#fff; //变量
body{
background: $color;
}
课时7 插件minCssExtract
把sass 转化成css 后，输出到css文件中去,实现js与css的分离。
安装：npm install --save-dev mini-css-extract-plugin或者cnpm install mini-css-extract-plugin -D
需修改的配置文件：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
module: {
rules: [{
test: /\.scss$/,
use: [
// "style-loader", // creates style nodes from JS strings
MiniCssExtractPlugin.loader,
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default]
]
}]
}
课时8 插件DefinePlugin
DefinePlugin 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用。如果在开发构建中，而不在发布构建中执行日志记录，则可以使用全局常量来决定是否记录日志。这就是 DefinePlugin 的用处，设置它，就可以忘记开发和发布构建的规则。
const webpack = require('webpack');
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].css',
chunkFilename: '[id].css',
}),
new webpack.DefinePlugin({
'SERVICE_URL': JSON.stringify('https://www.baidu.com')
}),
],
在js中使用该全局变量：SERVICE_URL
async function sayHello(){
const result = await fetch(SERVICE_URL);
console.log(result);
}
这样可以针对开发模式和生产模式分别设置配置文件，而不用维护代码，给维护带来了极大便利。
课时9 插件HtmlWebpackPlugin
HtmlWebpackPlugin简化了HTML文件的创建，以便为你的webpack包提供服务。这对于在文件名中包含每次
会随着编译而发生变化哈希的 webpack bundle 尤其有用。 你可以让插件为你生成一个HTML文件，使用
lodash模板提供你自己的模板，或使用你自己的loader。
安装：npm install --save-dev html-webpack-plugin或者cnpm install html-webpack-plugin -D
配置：
const HtmlWebpackPlugin = require('html-webpack-plugin');
vconst path = require('path');
const webpackConfig = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
};
运行webpack命令后生成的html中自动引用生成的css和js文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<link href="main.css" rel="stylesheet"></head>
<body>
<script type="text/javascript" src="output.bundle.js"></script></body>
</html>
但是我们通常除了引用打包的js外还需要应用其它的js等文件，比如jquery等，此时就需要进一步配置了。
修改的配置文件：
plugins: [ new HtmlWebpackPlugin({
title: 'Good Morning',//title可以应用到html文件中
filename: 'index.html',//输出文件
template: 'template.html'//自己的输入文件
})]
自己的html（template）文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
</head>
<body>
<div id="good"></div>
</body>
</html>
打包之后的html（index）文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Good Morning</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<link href="main.css" rel="stylesheet"></head>
<body>
<div id="good"></div>
<script type="text/javascript" src="output.bundle.js"></script></body>
</html>
课时10 热替换
每次修改代码就需要编译一下，这样操作会很繁琐。期望编译操作是自动化的。
安装：npm install webpack-dev-server --save-dev或者cnpm install webpack-dev-server -D
配置：
module.exports = {
//...
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,//是否压缩
port: 9000
}
};
运行cmd命令：webpack-dev-server 但是这个并没有全局安装，是个坑，可以在package.json文件中进行设置.
"scripts": {
"start": "webpack-dev-server"
}
运行cmd命令：npm run start
没有局部安装webpack-cli,打包时出错了。安装cnpm install webpack-cli -D
修改html时，服务器自动编译.
课时11 webpack4升级实战
开发项目。npm install vue-cli -g
vue开发，脚手架用的webpack3,如何升级到webpack4
解决思路:先升级webpack到4，然后根据项目报错信息升级对应升级的组件，是个系统的工程。
cnpm install XXX 这个-D,-S 如何区分：如果安装要保存到package.json的dependencies节点中，用的是-S,如果是devDepencies中则用的是-D
webpack 和webpack-dev-server 是配套的，版本一致。
升级组件时一般用的是latest，可能有的要用next版本，这是个坑：
cnpm install extract-text-webpack-plugin@latest -D
cnpm install extract-text-webpack-plugin@next -D 还没对外发布，但已经开发完了
