webpack 入门2

提取css成单独文件

• 插件 mini-css-extract-plugin
• 用此插件取代css-loader，提取css成单独文件
• 配置输出路径以及文件名

  new miniCssExtractPlugin({
    filename: 'css/[hash:10].css'
  })
  

css兼容性处理 post-css

• postcss、postcss-loader、 postcss-preset-env 能够精确兼容到浏览器的版本

   {
      test: /\.less$/i,
      use: [
        // compiles Less to CSS
        miniCssExtractPlugin.loader,
        'css-loader',
        'less-loader',
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
            // 读取 package.json中 browserslist 配置加载兼容的css
              plugins: [
                [
                  'postcss-preset-env',
                  {
                    // 其他选项
                  },
                ],
              ],
            }
          }
        }
      ],
    }
    
  // package.json browserslist
    "browserslist": {
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ],
      "production": [
        ">0.2%",
        "not dead", 
        "not op_mini all"
      ]
    }
    
  

压缩css

• 插件 optimize-css-assets-webpack-plugin
• 加入到 plugin里就可以

eslint 语法配置

• 插件 eslint-config-airbnb-base eslint-plugin-import-eslint eslint-loader `eslint
• loader 配置

  {
      test: '/.js$/',
      excludes: '/node_modules/', // 排除 node_modules
      loader: 'eslint-loader',
      options: {
        fix: true
      }
  }
  
  // eslintConfig
  "eslintConfig": {
    "extends": "airbnb-base"
  }
  
  

js 兼容性处理 babel

• babel-loader @babel/preset-env @babel/core

  {
      /**
       * js 兼容性处理 babel-loader
       */
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: '/node_modules/',
      options: {
        // 预设 Babel做哪些兼容处理
        presets: ['@babel/preset-env']
      }
  }
  

• 问题： 只能转换基本语法 如promise不能转换
• 解决： 全部js兼容处理： @babel/polyfill 只要涉及到兼容性全部处理
• 又有问题： 只要解决部分兼容问题， 将所有兼容代码全部引入，体积太大
• 又解决：按需加载 corejs

  {
      /**
       * js 兼容性处理 babel-loader
       */
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: '/node_modules/',
      options: options: {
        // 预设 Babel做哪些兼容处理
        presets: [
          [
            '@babel/preset-env',
            {
              // 按需加载
              useBuiltIns: 'usage',
              // 指定core-js版本
              corejs: {
                version: 3
              },
              // 指定兼容性做到哪个版本浏览器
              targets: {
                chrome: '60',
                ie: '9'
              }
            }
          ]
        ]
     }
  }
  

压缩 js 代码

• mode 为 'production'的时候会自动压缩

html代码压缩

• 配置u

  new HtmlWwebpackPlugin({
    template: './index.html',
    minify: {
      collapseWhitespace: true, // 移除空格
      removeComments: true // 移除注释
    }
  })