webpack-打包html/css 依赖loader/plugins

html 打包依赖

• loader中use得加载顺序是逆序得，所以我们需要注意loader得使用顺序
  • 使用插件 html-webpack-plug
  • 作用:创建html文档到输出路径，并将打包后所有资源加载其中
  • 接收一个参数tamplate 复制template中指定得html文件内容至输出路径
  • 用法：

  //  导入依赖 在插件中调用即可
    const htmlWebpackPlugin = require('html-webpack-plugin')
    plugins: [
        //  接收一个参数设置要复制得文件
        new htmlWebpackPlugin({
            template: './src/index.html'
        }),
    ],

css/sass 打包依赖

• loader: mini-css-extract-plugin style-loader css-loader sass-loader node-sass
  • css-loader:
    • 作用：将引入入口文件得css资源加载到输出js中 css得样式会放在打包后得js中
  • style-loader:
    • 作用：将输出文件中得css部分以style得形式加载至html中
  • sass-loader:
    • 作用：编译sass文件为css文件/使用顺序在css-loader之后
    • 依赖：node-sass 和sass-loader配套使用
  • mini-css-extract-plugin:
    • 作用：整合css文件打包后生成一个css文件，并加载至html页面中
    • 需要注意的是：和style-loader冲突二选一
    • 用法：放置loader最前方，最后一个执行。
    • 在loader中调用其自身loader方法
    • 并在插件中同时调用

                const miniCssExtractPlugin = require('mini-css-extract-plugin')
                test: /\.css$/,
                use: [{
                        loader: miniCssExtractPlugin.loader,
                        options: {
                            esModule: false
                        },
                    }, 'css-loader',
        //  插件
            plugins: [
       //  接收一个参数设置输出路径 mini-css-extract-plugin 可以把css文件剥离入口文件，并在输出文件html页面中以link形式引入资源
              new miniCssExtractPlugin({
                        filename: 'css/bulit.css'
              }),
            ],

• 处理图片资源

  • url-loader 依赖file-loader 配套使用
    • 作用：打包css文件中background:url('') 引入得路径，并可以压缩图片
    • 用法：
    • 处理图片资源 --url-loader 依赖file-loader

     {
              test: /\.(png|jpg|gif|jpeg|bmp|ttf|svg)$/,
              //  单个loader处理时可以直接书写loader + 依赖字符串形式 不用在use数组中使用
              //  使用 url-loader 依赖于 file-loader
              loader: 'url-loader',
              //  配置项
              options: {
                  //  当图片大小小于8kb,就回被base64处理
                  //  有点：减少请求数量（减少服务器压力）
                  //  缺点：图片体积会增大
                  limit: 8 * 1024,
                  //  使url-loader和html-loader得引入方式匹配  默认url-loader使用ES6 而html-loader使用CommonJs
                  esModule: false,
                  //  [ext] 取文件原来扩展名
                  //  打包图片时重命名名称  取hash后得前三位
                  name: '[hash:3].[ext]',
              }
  
  

• 处理在html中引入得图片路径

  • html-withimg-loader
    • 作用：打包在html中引用得图片路径

• 打包其他静态资源

  • file-loader
    • 作用：打包静态资源 如：字体 ttf/svg/woff/eot

• 清空打包目录，每次打包重新生成

  • clean-webpack-plugin
  • 在打包之前先清除之前得文件，在进行打包。

  • css文件压缩

    • 插件：optimize-css-asserts-webpack-plugin
      • 作用：压缩css文件为生产状态 和sass中得compress 一致
      • 用法：插件plugins中引入

• css兼容性设置 autoprefixs

  • postcss-loader 插件：postcess-preset-env
    • 作用：根据browerslist中配置得浏览器配置，自动添加css兼容前缀 autoprefixs
    • browerslist 配置在package.json 作用匹配需要做兼容得浏览器范围
    • browerslist 设置两个模式 development/production
    • 注意：browerslist得模式和webpack得模式不同，默认为production模式，如需更改
      需要在全局中修改 process.env.NODE_ENV = "development"
    • 在loader中设置，process-loader 并在loader插件中引用postcss-preset-env

                test: /\.css$/,
                use: [{
                        loader: miniCssExtractPlugin.loader,
                        options: {
                            esModule: false
                        },
                    }, 'css-loader',
                    //  兼容配置
                    //  postcss 在webpack中是已下两种依赖
                    //  依赖：postcss-loader postcss-preset-env
                    //  postcss-preset-env 帮助postcss找到package.json中browserslist里面得配置，通过配置加载指定得css兼容样式
                    //  browserslist 在package.json中配置 目的是设置css所需要兼容得哪类浏览器
                    //  功能：设置针对浏览器得兼容配置 模式：开发，生产
                    {
                        loader: 'postcss-loader',
                        options: {
                            //  ident:识别
                            ident: 'postcss',
                            plugins: (loader) => [
                                require('postcss-preset-env')()
                            ]
                        }
                    },
                ]
  //  package.json  具体匹配规自行百度
   "browserslist": {
        "devlopment": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ],
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ]
    }

• eslint校验

  • eslint 校验js代码
  • loader: eslint-loader eslint 配套使用
  • 作用：培养代码规范，整洁。公司代码校验
  • eslint 风格使用airbnb
  • eslint-config-airbnb-base eslint-plugin-import ;eslint-config-aribnb 支持recat
  • 使用

  {
  test: /\.js$/,
  loader:'eslint-loader',
  options:{
  //  自动修复违规代码
    fix:true
  }
  }
  // 关联airbnb
  // package.json
  eslintConfig:{
  // 继承airbnb
  "estend":"airbnb-base" 
   }
  

• js兼容

  • babel-loader @babel/core @babel/preset-env @babel/polyfill core-js配套使用
  • 使用时，在入口文件中引入
  • import '@babel/polyfill'
  • 作用：解决ie等浏览器不识别es6等js语言
  • @babel/polyfill 优点：做完整得兼容处理 ，缺点：打包后js文件体积大
  • core-js 按需兼容 ：优点：体积小，可以按照需求做兼容
  • 使用：

  {
    test:/\.js$/,
    exclude:/node_modules/,
    loader:babel-loader,
    options:{
        //预设：
        presets:[
          [
            '@babel/preset-env',
            {
              useBuiltIns: 'usage', //按需加载
              corejs: { //关联corejs
                version:3 //在安装时会提示版本
              },
              // 指定兼容哪些浏览器版本
              targets: {
                chrome:'60',
                ie:'9',
                firefox: '60',
                safari: '10',
                edge: '11',
              }
            }
          ]
        ]
    }
  }
  

• HMR 模块热更新

  • 某一个模块（文件）改变时，其他某块不会重新打包
  • 在devServer中增加hot:true字段，开启热更新得模块热更新
  • html文件处理
    • html 当开启热更新后，html文件默认不支持模块热更新，同时还会造成html文件热更新失败。
      • 解决得办法：在入口entry中引入html文件entry: ['./src/js/index.js', './src/index.html'],
  • css文件处理
    • css文件通过style-loader可以完成模块热更新（适用于开发环境），当我们需要在生产环境中将所有css文
      件整合时我们在使用mini-css-extract-plugin loader将我们得css合并成一个文件
  • js文件处理
  • js文件默认不支持模块热更新
    • 解决办法
      • 当开启热更新后我们在js入口文件中监听模块热更新，当某一个模块代码发生变化时做单独处理

      •  // 在js入口文件中写入代码     入口文件自身不能设置模块热更新，因为入口文件会加载所有模块，
        if (module.hot) {
         module.hot.accept('./module1.js',() => {
             // 参数1 要监听得模块路径  参数2 回调函数
            // 我们在这里完成模块对得操作
           //  当被检测当前文件代码有错误时，不会触发当前文件得模块热更新
         })
         module.hot.accept('./module2.js',() => {
           // 我们在这里完成模块对得操作
         })
        
        }
        

• webpack.optimize.CommonsChunkPlugin

  • 抽离js依赖

    // 在项目入口区分文件
    entry:  {
      app: resolve(__dirname,'./src/index.js' ), // 项目入口文件
      vendors: ['jquery'], // 要从入口文件中剥离出去得依赖
    } 
  plugins:[
    new webpack.optimize.CommonsChunkPlugin({
      name:'vendors'， // 要剥离得依赖数组引用名称
      filename: vendors, // 剥离后得文件名称
    })
  ]
  

• source-map

  • 调试 排错
    • 在webpack.config.js中加入 devtool: "source-map"

   //  source map  源代码后构建后代码得映射关系表，打包后得项目报错时，可以追踪到源代码
  /*
   *   devtool模式
   *   const tip = '错误代码精准信息，源代码错误位置'
   *   source-map 外部 + tip
   *   inline-source-map 内联 在打包后得文件中生成映射信息，+ tip
   *   hidden-source-map 外部 只能提示到打包后代码得错误位置 
   *   eval-source-map 内联 在打包后得文件中对引入得每一个文件得eval中生成source-map, tip
   *   nosource-source-map 外部, tip
   *   cheap-source-map 外部, tip . 只能精准到行
   *   cheap-module-source-map 外部, tip
   *   内联 和 外部得区别：1. 外部生成了文件， 内联没有 2. 内联构建速度更快
   *   开发环境：速度快，调试优
   *      速度对比(eval>inline>cheap>....)
   *      eval-cheap-source-map  包含代码提示，打包速度块
   *      eval-source-map
   *   生产环境：源代码是否隐藏？调试要不要友好
   *      内联模式代码体积大，生产环境不用内联
   *      nosource-source-map 全部隐藏
   *      hidden-source-map 只隐藏源代码, 会提示构建后的错误
   */
  

• oneOf

  • 问题：每个不同文件在loader转换时，都会被命中。遍历module中rules中得所有loader
  • loader内容直加载一次
  • 缺点：多次处理同类型文件得loader不会全部触发，只会触发一个
  • 优点：在oneOf中得loader只加载一次

• 缓存

  • 缓存适用于生产环境
  • 1.babel 缓存 在options中设置cacheDirectory:true 开启缓存
  • 2.文件资源缓存
    • 借助Node服务器
    • 在打包输出得时候给打包文件加上唯一标识
      • output:{filename:'index.[contenthash:10].js'}
      • 1.hash: 利用webpack每次打包生成得hash记录 缺点：修改js或css代码时，会同时触发css/js更新
      • 2.chunkhash:根据构建打包得chunk创建hash 缺点：同上
      • 3.contenthash:根据文件内容生成hash值，不同文件得hash值不一样 。
        当文件没有发生改变时hash值不变。解决了问题

• tree shaking (树摇)

  • 前提：使用ES6模块化，开启production环境
  • 作用：去掉无用代码，减少代码体积
  • 问题：由于版本得区别可能会干掉import 引入得css资源
  • 解决：在package.json文件中增加sideEffects:["*.css", "*.sass"] 排除匹配项