webpack实战入门

1. webpack

   1. webpack 就是一个js程序的打包器，当 webpack 处理应用程序时，它会递归地构建一个依赖关系图

3.webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性

2. webpack打包的好处

1. webpack的使用

   1. 新建项目空白目录 运行 npm init -y命令 初始化包管理配置文件 package.json
   2. 新建src源代码目录，将项目的源代码放在这个目录下
   3. 安装webpack   npm i webpack webpack-cli -D
           - 在package.json文件的devDependencies中出现了安装的webpack和webpack-cli，就代表安装成功
   3. 在项目的根目录自行创建 webpack.config.js 文件 （所有的配置都写这里）

2. 配置前打包操作演示

   1. 修改项目中的package.json文件添加运行脚本dev如下
        "scripts":{
           "dev":"webpack"
      }
   2. 在演示运行的时候需要初始初始配置打包模式
       module.exports = {
           mode: 'development' // 可以设置为development(开发模式)，production(发布模式)
     }
       - 如果设置为development则表示项目处于开发阶段，不会进行压缩和混淆，打包速度会快一些
       - 如果设置为production则表示项目处于上线发布阶段，会进行压缩和混淆，打包速度会慢一些
       - scripts节点下的脚本，可以通过npm run运行 如 npm run dev  将会启动webpack进行项目打包
   3. 等待webpack打包完毕之后，找到默认的dist路径中生成的main.js文件，将其引入到html页面中。浏览页面查看效果。

3. 开始配置

   1. 在webpack 4.x 中，默认会将src/index.js 作为默认的打包入口js文件
   2. 默认会将dist/main.js 作为默认的打包输出js文件

// 在webpack.config.js内，我们需要将所有配置当成一个对象导出

1. 引入node.js 中专门操作路径的模块

const path = require('path') module.exports = {

     // 1. 项目编译模式
     mode: 'development' ,
     // 2. 配置打包的入口和出口文件
     entry: path.join(__dirname, './src/xx.js'), // 指定某入口文件的路径,
     output: {
         // 设置路径
         path: path.join(__dirname,'./dist'),
     // 设置文件名
     filename: 'bundle.js'
       }

}

6.  webpack 配置自动打包

1. 在默认的情况下，我们更改入口js文件的代码，需要重新运行命令打包webpack，那么每次都要重新执行命令，这是一个非常繁琐的事情，自动打包可以解决这样繁琐的操作

2. 安装自动打包功能的包:webpack-dev-server

       -  npm install webpack-dev-server -D

3. 修改package.json中的dev指令如下

    "scripts":{
     "dev":"webpack-dev-server"
   }

4. 将引入的js文件路径更改为 <script src="/bundle.js"></script>
5. 运行npm run dev，进行打包
6. 打开网址查看效果：http://localhost:8080
7. webpack-dev-server自动打包的输出文件(bundle.js)，默认放到了服务器的根目录中.是虚拟的看不见的
8. webpack-dev-server 会启动一个实时打包的http服务器，实现方式就是打开package.json文件
9. 修改dev命令： "dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"
10. webpack-dev-server也需要配置部分参数可以单独拿出来配置

module.exports = {

 // 开发服务器的配置
 devServer: {
   port: 8080, // 改变开启的端口号
   progress: true, // 开启内存打包中的进度条，这样我们能清楚地看到打包的进程
   open: true, // 自动打开浏览器
   compress: true //压缩
 },

}

7. 配置html-webpack-plugin 生成一个预览页面

1. 配置自动打包相关的参数

   1. package.json 中的配置
      1. --open 打包完成后自动打开浏览器
        2. --host 配置Ip地址
      3. --port 配置端口
   2. "dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"

2. webpack打包静态资源

   1. Webpack在设计时，只是用来打包JavaScript文件的代码。但是我们知道，一个网页不可能只存在JS代码和一个HTML模板，还有图片资源、CSS资源、文件资源等其他资源。并且，网页中的CSS样式也不可能一成不变，可能你点击某个按钮时页面的排版就变了。其实本质上就是CSS变了，我们将这种情况叫做动态CSS。
   2. 我们知道，对于已经写死不需要修改的CSS，一般在HTML中通过link标签引入就可以了。但是对于动态CSS，必须要在特定的时候才能起作用，所以我们不能直接通过link标签引入。
   3. 因此，我们需要使用JS来控制动态CSS，而webpack本身不提供CSS的打包处理方法。为此，我们需要一些插件来补充Webpack的功能

--> 下载对应的loader； --> 配置相应的规则，让Webpack识别，然后调用loader

1. 打包css/scss/less资源

   1. CSS资源在一个网页里面是不可却少，处理普通的css文件只需要css-loader与style-loader就可以实现。
   2. 安装对应的loader -->   npm i css-loader style-loader -D
   3. css-lodaer与style-loader需要在Webpack.config.js下的module的rules内进行配置
       module.exports = {
       plugins:[htmlPlugin],
       module: {
         rules: [
           //处理css的规则
           {
             // test 设置需要匹配的文件类型，支持正则
             test:/\.css$/,
             user:['style-loader','css-loader', 'postcss-loader']
           },
           // 处理less的规则    
           {
              test:/\.less$/,
              use:['style-loader','css-loader','less-loader']
           },
           {
              test:/\.scss$/,
              use:['style-loader','css-loader','sass-loader']
           }
         ]
       }
     }
   4. 安装less,less-loader处理less文件  npm install less-loader less -D
   5. 配置规则和css写在一起
   6. 安装sass-loader,node-sass处理less文件  npm install sass-loader node-sass -D
   7. 配置规则和css写在一起
   8. postCss是对 CSS 进行处理的一种工具
           - 把 CSS 解析成 JavaScript 可以操作的 抽象语法树结构
       - 调用插件来处理 抽象语法树结构 并得到结果
   9. 安装post-css自动添加css的兼容性前缀（-ie-,-webkit-）

10.在项目根目录创建并配置postcss.config.js文件
const autoprefixer = require("autoprefixer");
module.exports = {
    plugins:[ autoprefixer ]
}
11. 在css文件中添加 postcss-loader
```

1. 打包样式表中的图片以及字体文件

   1. 在样式表css中有时候会设置背景图片和设置字体文件，一样需要loader进行处理
   2. 使用url-loader和file-loader来处理打包图片文件以及字体文件
   3. 安装对应的loader  -->  npm install url-loader file-loader -D

{
     test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
     //limit用来设置字节数，只有小于limit值的图片，才会转换
     //为base64图片
     use:"url-loader?limit=16940"
 }
```

1. 打包js文件中的高级语法：在编写js的时候，有时候我们会使用高版本的js语法

   1. 有可能这些高版本的语法不被兼容，我们需要将之打包为兼容性的js代码,我们需要安装babel系列的包
   2. 安装babel转换器
           -  npm install babel-loader @babel/core @babel/runtime -D
   3. 安装babel语法插件包
           -  npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
   4. 在项目根目录创建并配置babel.config.js文件
    module.exports = {
           presets:["@babel/preset-env"],
           plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-                properties" ]
    }

{
     test:/\.js$/,
     use:"babel-loader",
     //exclude为排除项，意思是不要处理node_modules中的js文件
     exclude:/node_modules/
 }
```

1. SourceMap

module.exports = {
    mode: 'development',
    devtool:'source-map'    
}
2. SourceMap是一种提供源代码到构建后代码映射技术；
3. 如果开启了SourceMap，则代码出错时，通过映射可以追踪代码错误的位置；
4. 外部映射：打包后每一个js文件都会生成一个名字相同的js.map文件；
5. 内联映射：映射代码和打包代码写在一起，不单独生成js.map文件。
```