webpack 是什么？
webpack是一个前端模块化打包工具指（由于模块化开发，所以需要打包，这里所说的 模块化开发主要指JS) 由于现代前端应用程序越来越复杂，需要采用模块化进行开发，但浏览器还未支持模块化开发，所以webpack才诞生
webpack默认只支持js的模块化（CommonJS/ES6/AMD），如果需要把其他文件（css/图片等）也当成模块引入，就需要相对应的loader解析器 现代前端
- 挂载点
传统前端的挂载点：html入口文件 （无论是js、css还是图片等资源都统一由html文件管理和调度）现代前端的挂载点：js入口文件 （无论是js组件、css还是图片等资源都统一由js文件管理和调度，html文件作为模板）
- 模块化与打包工具
传统前端：都是多页面应用，无模块化概念，因此无需打包工具现代前端：可以是单页面应用，也可以是多页面应用，有模块化概念，由于历史原因，很多浏览器还不支持模块化，故出现打包工具
- 导入模块资源
传统前端：在html文件，导入css资源使用
安装
- webpack
使用NPM进行安装，有2种方式：全局安装、局部安装（ 局部又分为生产局部安装和开发局部安装） 全局安装： npm i -g webpack局部开发安装： npm i -D webpack // （推荐此）JS应用在生产环境上不需要webpacke,所以无需使用生产局部安装
局部安装的项目，会在当前项目中node_module中，不会污染全局 - webpack-cli
v4.0.0之后，除了要安装webpack，还需要安装webpack-cli局部开发安装： npm i -D webpack-cli
配置
- 默认配置
在应用根目录下，定义webpack.config.js文件执行webpack时，直接在命令行输入webpack (会默认寻找webpack.config.js配置文件)
- 自定义配置
在应用根目录下，自定义webpack.config.dev.js文件执行webpack时，直接在命令行输入webpack --config webpack.config.dev.js如果把webpack.config.dev.js配置文件放在根目录下的文件夹里呢？
- 最简单配置 —— 打包JS模块
const path = require('path');module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, mode: 'development'}; 插件
- 简单创建 HTML 文件，用于服务器访问
所有打包好的JS文件，都要有一个html文件来引入，否则浏览器无法浏览，这个功能就是webpack插件 HtmlWebpackPlugin功能 1、安装npm install --save-dev html-webpack-plugin2、在webpack.config.js文件中配置const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, plugins: [ new HtmlWebpackPlugin({ filename: 'main.html' }) ], mode: 'development'}; 服务器 for dev
webpack提供了一个用于开发使用的服务器： webpack-dev-server，前端应用开发，需要一个调试开发服务器来看即时效果 - 安装
npm install webpack-dev-server --save-dev
- 配置
1、配置执行服务器命令在package.json中，配置"scripts": { "sdev": "webpack-dev-server"}*****注意：默认服务器是读取webpack.config.js文件，如果自定义了，需要加上--config webpack.config.dev.js*****2、在webpack配置文件中配置module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, plugins: [ new HtmlWebpackPlugin({ filename: 'main.html' }) ], mode: 'development', devServer: { open: true, // 自动开启 contentBase: path.join(__dirname, 'dist'), index: 'main.html' }}; - 执行原理
执行webpack，根据配置文件，会生成打包后的文件（硬盘）执行webpack-dev-server，根据配置文件，会生成打包后的文件（内存），并启动服务器
Babel 语法转换
Babel 是一个 NodeJS的独立应用，用于把ES2015/ES2016/ES2017/React转换成ES5用法：
1、在浏览器中使用2、webpack打包中使用 （以下主要讲解这种方式）3、命令行直接使用
- 安装
npm install -D babel-loader @babel/core @babel/preset-env
CSS 引入
在webpack中任何一个东西都称为模块，js就不用说了。一个css文件，一张图片、一个less文件都是一个模块，都能用导入模块的语法（commonjs的require，ES6的import）导入进来。webpack自身只能读懂js类型的文件，其它的都不认识。但是webpack却能编译打包其它类型的文件，像ES6、JSX、less、typeScript等，甚至css、images也是Ok的，而想要编译打包这些文件就需要借助loader
import（导入）是ES6 Module的模块化语法，与export（导出）是一对对应的技术，所以 *ES6 所说的导入都是导入 JS 文件*，而这个JS文件一般会有导出语法 - 问题：
为何webpack中能使用ES6 import语法导入CSS文件？
其实ES6 import语法没有规定一定要导入JS文件，但如果你导入的是非JS文件，运行时会报错的webpack借用了ES6的导入/导出语法，本身就支持导入JS文件如果需要转ES5，需要额外配置一个loader不同的是:webpack还支持导入别的文件（图片、css、less等），语法也是借用了ES6的导入/导出语法，需要额外配置一个loader
- 安装
npm i style-loader css-loader -D
- 配置
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { mode: 'development', entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', template: './public/index.html' }) ], devServer: { open: true, contentBase: path.join(__dirname, 'dist'), index: 'index.html' }, module:{ rules:[{ test:/\.css$/, use: ['style-loader', 'css-loader'] //执行loader的先后顺序是从右到左，必须先执行css-loader }] }}; 理解 ['style-loader', 'css-loader'] 执行顺序，就相当于 styleLoader( cssLoader( fileSource ) ) - css-loader
主要用于把.css文件的内容中@import/url()转成js的导入语法import/require并执行，输入的是.css文件内容，最后经常css-loader加载器处理后，得到的是css代码字符串
- style-loader
主要用于把css-loader处理后的css代码字符串添加到页面head内