webpack使用

webpack
Webpack是个打包工具，当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
Webpack只能处理JS语言，当有URL地址、CSS、Less、Scss等需要安装相关的loader
官网：https://www.webpackjs.com/
配置项目环境：npm init
1.安装nodejs
2.安装webpack
可以将所有引入文件打包到一个JS文件中
npm i webpack -D -S (建议安装在本地，全局容易出问题，4.0版本以下的兼容性好些)
3.安装相关loader
cnpm i css-loader file-loader less less-loader node-sass sass-loader style-loader url-loader -D -S
相关的配置参考下面的文档
如果要在html页面中打包图片，需要安装npm install html-withimg-loader --save-dev
然后配置{ test: /.html$/, loader: ‘html-withimg-loader’ }
https://www.cnblogs.com/ghost-xyx/p/5812902.html
3.安装其他相关插件
1.cnpm i webpack-dev-server -D -S
作用：为了开发更方便。不需要改动了文件就去手动刷新文件（需要在package.JSON中配置
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“dev”: “webpack-dev-server --open --port 3000 --hot”
}）
2.cnpm i html-webpack-plugin -D -S
3.安装babel插件，以下为说明：
// 项目的JS入口文件
console.log(‘ok’)
import ‘./css/index.css’
import ‘./css/index.scss’
// 注意： 如果要通过路径的形式，去引入 node_modules 中相关的文件，可以直接省略 路径前面的 node_modules 这一层目录，直接写 包的名称，然后后面跟上具体的文件路径
// 不写 node_modules 这一层目录 ，默认 就会去 node_modules 中查找
import ‘bootstrap/dist/css/bootstrap.css’
// class 关键字，是ES6中提供的新语法，是用来 实现 ES6 中面向对象编程的方式
class Person {
// 使用 static 关键字，可以定义静态属性
// 所谓的静态属性，就是 可以直接通过 类名， 直接访问的属性
// 实例属性： 只能通过类的实例，来访问的属性，叫做实例属性
static info = { name: ‘zs’, age: 20 }
}
// 访问 Person 类身上的 info 静态属性
在 webpack 中，默认只能处理 一部分 ES6 的新语法，一些更高级的ES6语法或者 ES7 语法，webpack 是处理不了的；这时候，就需要 借助于第三方的 loader，来帮助webpack 处理这些高级的语法，当第三方loader 把 高级语法转为 低级的语法之后，会把结果交给 webpack 去打包到 bundle.js 中
通过 Babel ，可以帮我们将 高级的语法转换为 低级的语法

1. 在 webpack 中，可以运行如下两套 命令，安装两套包，去安装 Babel 相关的loader功能：
   1.1 第一套包： cnpm i babel-core babel-loader babel-plugin-transform-runtime -D -S
   有时候版本会报错 Unknown plugin “transform-runtime” specified 就换成这个去安装cnpm install --save-dev babel-plugin-transform-runtime
   有时候版本会报错 Unknown plugin “transform-runtime” specified 就换成这个去安装cnpm install --save-dev babel-plugin-transform-runtime
   1.2 第二套包： cnpm i babel-preset-env babel-preset-stage-0 -D -S
2. 打开 webpack 的配置文件，在 module 节点下的 rules 数组中，添加一个 新的 匹配规则：
   2.1 { test:/.js$/, use: ‘babel-loader’, exclude:/node_modules/ }
   2.2 注意： 在配置 babel 的 loader规则的时候，必须 把 node_modules 目录，通过 exclude 选项排除掉：原因有俩：
   2.2.1 如果 不排除 node_modules， 则Babel 会把 node_modules 中所有的 第三方 JS 文件，都打包编译，这样，会非常消耗CPU，同时，打包速度非常慢；
   2.2.2 哪怕，最终，Babel 把 所有 node_modules 中的JS转换完毕了，但是，项目也无法正常运行！
3. 在项目的 根目录中，新建一个 叫做 .babelrc 的Babel 配置文件，这个配置文件，属于JSON格式，所以，在写 .babelrc 配置的时候，必须符合JSON语法规范： 不能写注释，字符串必须用双引号
   3.1 在 .babelrc 写如下的配置： 大家可以把 preset 翻译成 【语法】 的意思
   {
   “presets”: [“env”, “stage-0”],
   “plugins”: [“transform-runtime”]
   }
4. 了解： 目前，我们安装的 babel-preset-env, 是比较新的ES语法， 之前， 我们安装的是 babel-preset-es2015, 现在，出了一个更新的 语法插件，叫做 babel-preset-env ，它包含了 所有的 和 es***相关的语法
   Java C# 实现面向对象的方式完全一样了， class 是从后端语言中借鉴过来的， 来实现面向对象
   var p1 = new Person()
   function Animal(name){
   this.name = name
   }
   Animal.info = 123
   var a1 = new Animal(‘小花’)
   这是静态属性：
   console.log(Animal.info)
   这是实例属性：
   console.log(a1.name)
   4.babel-plugin-transform-remove-strict-model 移除babe严格模式插件
   有时候在其他的插件下面会报错，需要移除严格模式
   ​
   5.vue框架还需要安装相关的loader : cnpm i vue-loader vue-template-compiler -D
   在webpack.config.js中配置{ test: /.vueKaTeX parse error: Expected 'EOF', got '}' at position 22: …: 'vue-loader' }̲ // 处理 .vue 文件的…/, use: ‘url-loader?limit=11&name=images/[hash:8]-[name].[ext]’ }
   7.分离第三方包：
   8.压缩JS代码：
   官方文档：https://webpack.js.org/plugins/terser-webpack-plugin/
   安装 npm i terser-webpack-plugin -d -s
   导入模块 const TerserPlugin = require(‘terser-webpack-plugin’);
   在module.exports 配置下面选项
   optimization: {//配置压缩选项
   },
   9.webpack解析jsx语法
   npm i babel-preset-react -d
   然后在.babelrc的"presets"中添加"react"