webpack实战入门

1. webpack

   1. webpack 就是一个js程序的打包器，当 webpack 处理应用程序时，它会递归地构建一个依赖关系图
   2. Webpack就是负责从我们指定的一个文件为入口，以入口文件为基础，然后依据环环相扣的关系，把我们写的每个需要使用的功能模块找到，构建出一个依赖关系，然后把它们优化、压缩、打包，最后生成最完美的文件。
   3.webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性

2. webpack打包的好处

   1. 程序员在开发的时候需要更好的代码布局，比如有空格、有换行、有注释、错落有致
   2. 浏览器望能更快的解析代码，而不是更好的看懂代码。所以Webpack的主要作用就是压缩、优化我们写的代码，把多余的东西去掉，然后按照浏览器喜欢的风格来编排代码！

3. 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 文件 （所有的配置都写这里）

4. 配置前打包操作演示

   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页面中。浏览页面查看效果。

5. 开始配置

   1. 在webpack 4.x 中，默认会将src/index.js 作为默认的打包入口js文件
   2. 默认会将dist/main.js 作为默认的打包输出js文件
   3. 可以修改默认的打包的入口和出口文件
   // 在webpack.config.js内，我们需要将所有配置当成一个对象导出
   4. 引入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 生成一个预览页面

   0. 因为我们的网页不能只有JS代码，网页最根本的还是需要一个HTML文件。但是Webpack只会打包JS，因此我们就要引入一个HTML模板。模板HTML，其实就是一个最原始HTML文件，我们通常将其命名为index.html。它的作用主要是：为html文件中引入打包后的外部资源，如script、link标签里的JS、CSS文件。
   1. 因为当我们访问默认的 http://localhost:8080 的时候，看到的是一些文件和文件夹，想要查看我们的页面还需要点击文件夹点击文件才能查看，那么我们希望默认就能看到一个页面，而不是看到文件夹或者目录。
   2. 安装默认预览功能的包:html-webpack-plugin
    -  npm install html-webpack-plugin -D
   3. 修改webpack.config.js文件，如下：
    //导入包
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    //创建对象
    const htmlPlugin = new HtmlWebpackPlugin({
         // 设置生成预览页面的模板文件
         template:"./src/index.html", // 模版路径，一般放在public文件夹下
         // 设置生成的预览页面名称
         filename:"index.html", // 打包后的文件名
        // minify 对打包的html模版进行压缩
        minify: {
           removeAttributeQuotes: true, // 删除属性的双引号，除了一些特殊的删除不了以外都能删除
           collapseWhitespace: true,    // 折叠空行将所有代码变成一行
           removeComments: true         // 移除注释
         },
         hash: true // 给打包后在模板中引入的文件名生成hash戳，防止缓存
     })
   4. 继续修改webpack.config.js文件，添加plugins信息：
    module.exports = {
          ......
          plugins:[ htmlPlugin ]
     }
   5. 打包后，dist文件夹内的index.html自动引入了Webpack打包后的文件

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

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

9. webpack打包静态资源

   1. Webpack在设计时，只是用来打包JavaScript文件的代码。但是我们知道，一个网页不可能只存在JS代码和一个HTML模板，还有图片资源、CSS资源、文件资源等其他资源。并且，网页中的CSS样式也不可能一成不变，可能你点击某个按钮时页面的排版就变了。其实本质上就是CSS变了，我们将这种情况叫做动态CSS。
   2. 我们知道，对于已经写死不需要修改的CSS，一般在HTML中通过link标签引入就可以了。但是对于动态CSS，必须要在特定的时候才能起作用，所以我们不能直接通过link标签引入。
   3. 因此，我们需要使用JS来控制动态CSS，而webpack本身不提供CSS的打包处理方法。为此，我们需要一些插件来补充Webpack的功能
   4. 其实，处理静态资源是有固定的套路的：
   --> 下载对应的loader；
   --> 配置相应的规则，让Webpack识别，然后调用loader
   5. loader就是解析器的意思，处理不同的资源要使用及下载不同的loader。再配置相应的规则，让webpack明白我们要使用什么样loader，处理什么样的文件。

10. 打包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-）
            -  npm install postcss-loader autoprefixer -D
    10.在项目根目录创建并配置postcss.config.js文件
    const autoprefixer = require("autoprefixer");
    module.exports = {
        plugins:[ autoprefixer ]
    }
    11. 在css文件中添加 postcss-loader

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

    1. 在样式表css中有时候会设置背景图片和设置字体文件，一样需要loader进行处理
    2. 使用url-loader和file-loader来处理打包图片文件以及字体文件
    3. 安装对应的loader  -->  npm install url-loader file-loader -D
    4. 配置规则：更改webpack.config.js的module中的rules数组添加下列规则
    {
         test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
         //limit用来设置字节数，只有小于limit值的图片，才会转换
         //为base64图片
         use:"url-loader?limit=16940"
     }

12. 打包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" ]
     }
    5. 配置规则：更改webpack.config.js的module中的rules数组添加下列配置
    {
         test:/\.js$/,
         use:"babel-loader",
         //exclude为排除项，意思是不要处理node_modules中的js文件
         exclude:/node_modules/
     }

13. SourceMap

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