10、webpack

一、为什么需要打包工具

开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。
这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法，才能运行，所以我们需要打包工具帮我们做完这些事。
除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。

Webpack功能有限：
开发模式：仅能编译JS中的 ES Moudle语法
生产模式：能编译JS中的 ES Moudle语法，且能压缩 JS 代码

二、webpack——引入js文件

//Step1：初始化
npm init -y

//Step2：下载依赖
npm i webpack webpack-cli -D
//-D表示安装到开发环境中
//webpack-cli是核心（webpack依赖于webpack cli，如果没有安装webpack就会报错）
//执行webpack命令，会执行node_modules下的.bin目录下的webpack

//Step3：项目根目录demo文件夹——src文件夹——app.js & m1.js
//m1.js
export default 'fighting Evelyn';
//app.js
import m1 from './m1'
console.log(m1)

//Step4：启用webpack
//使用npx命令，即去当前项目的 `node_modules/.bin` 下找 `webpack.cmd` 命令
npx webpack ./src/app.js --mode=development //开发模式
npx webpack ./src/app.js --mode=production  //生产模式
//npx webpack：用来运行本地安装的webpack包
//文件名：指定webpack从哪个文件开始打包，不但会打包该文件，还会将其依赖也一起打包
//--mode=xxx：指定环境/模式

//Step5：在public文件夹中的index.html文件（index.html表示默认的页面）

【注】：npm初始化后，package.json文件中的name字段不能叫 webpack, 否则下一步会报错（也就是项目的根目录文件名，不能直接叫webpack)。
【注】：Webpack本身功能比较少，只能处理js和json资源，一旦遇到css等其他资源就会报错。
npx和npm一样，不需要额外安装
【注】：开发环境下可以看到哪些模块参与了打包，生产环境只注重打包结果，最后产生了dist文件夹的main.js

三、package.json中配置脚本

{
	"scripts":{
		"dev":"npx webpack --config ./config/webpack.config.js",
		"start":""
	}
}

【注】：npm run ‘别名’，当别名是start时，run可以省略

四、配置webpack

webpack打包的五大核心：
（1）entry——打包入口文件地址
（2）output——打包文件出口路径
（3）mode——打包模式
（4）module——加载器
（5）plugin——插件
【注】：前三个属性可以单独为以.js结尾的文件进行打包，但是如果文件结尾为.css/.less/png/jpg/gif/mp4/woff，则需要模块以及插件来支持。
【注】：这个对象中的五个属性书写没有任何的顺序，一般情况下，按照入口、出口、模块、插件、模式等等

五、webpack——引入css文件

//Step1：下载两个加载器loader
//npm i css-loader style-loader -D

//Step2：webpack.prod.js文件中，向外暴露一个对象
module.exports = {
	//打包的入口文件地址是针对于运行终端来说，而非webpack.prod.js和src目录之间的关系
	entry:"./src/js/app.js",
	output:{
		//path属性是语法，不能修改，后面的值是一个绝对路径,自动产生一个路径，需要借助于node中的内置模块——path
		//path和filename,属性名称是固定的
		path:path.resolve(__dirname,'../dist'),
		filename:'js/bundle.js',
		//每一次重新打包的时候都会将上一次的结果清除掉
		clean:true
		},
		
	//打包模式
	mode:'production',
	
	//加载器(loader)
	module:[
	{
		//rules规则，rules中存放的是一个数组，数组中放着对象的值，也就是说，有一条规则，就会配置一个对象。
		rules:[
			{
				//test是正则中的检测，正则规则
				test: /\.css$/i,//也可以是/[.]css$/i，为了将.转义成普通字符
				use:['style-loader', 'css-loader'],
				//如果是一个加载器，use后面是一个字符串
				//如果有多个加载器，use后面是一个数组，数组的执行顺序是由右向左，
				//css-loader：加载.css文件，解析css语法，返回css语句
				//style-loader：在index.html的head中添加style标签
			}
		]
	}
	]
}

//Step3：添加css资源（在src/css/index.css文件中）
.box1 {
  width: 100px;
  height: 100px;
  background-color: pink;
}

//Step4：在主入口文件中引入css，webpack才会将其打包
import "../css/index.css";

//Step5：在index.html页面中，引入js文件
<script src="../dist/js/bundle.js"></script>

六、处理HTML资源

是指，将public文件夹下的index.html文件打包，并放在dist文件夹根目录。

//Step1：安装包  npm i html-webpack-plugin -D
//Step2：在webpack.prod.js文件中，配置插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  //插件
  plugins: [
    new HtmlWebpackPlugin({
      //需要打包的html文件路径什么？
      template: path.resolve(__dirname, "../public/index.html"),
      //打包之后的文件叫什么？
      filename:'index.html',
      //将打包后的bundle.js文件自动添加到打包后的index.html文件中
      //并放在body标签中
      inject:'body'
    })
  ]
};
//Step3：去掉index.html代码中的引js、css的标签(script和link标签)

七、开发服务器&自动化

每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们希望一切自动化

//Step1：安装包
//npm i webpack-dev-server -D

//Step2：配置(在config文件夹中webpack.dev.js文件中：)
//导入
const ProdConfig = require('./webpack.prod');
//暴露
module.exports = {
    ...ProdConfig,
    //打包模式
    mode: 'development',
    //配置开发服务器
    devServer: {
        //主机地址:
        host: 'localhost',
        //端口号
        port: 3000,
        //是否自动打开浏览器
        open: true
    },
    //源代码和构建后的代码需要产生一个映射关系
    devtool: 'cheap-module-source-map'
}
//Step3：运行指令
npx webpack server --config ./config/webpack.config.js
//也可以在package.json文件中的scripts中配置start
//这样在终端可以直接：npm start

八、Map映射

module.exports = {
  // 其他省略
  mode: "production",
  devtool: "source-map",
};

module.exports = {
  // 其他省略
  mode: "development",
  devtool: "cheap-module-source-map",
};
//会产生如下文件：bundle.js.map