webpack 学习(2) ---处理js和css常用的loader与插件

js处理
为提高我们代码的兼容性，我们会将ES6语法转成ES5打包；处理js就或用到babel-loader
首先安装一下babel
npm i babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env -D 把ES6 转换成 ES5
npm i @babel/plugin-transform-runtime -D 对于一些实例上的内置api方法 一些无法转换ES5，那么就需要安装这个插件
npm install @babel/runtime @babel/polyfill -S 作为补丁就需要用在生产环境了， 使用babel/polyfill 需要在js文件用引入
npm i @babel/plugin-proposal-class-properties -D 当模块中使用到class类时，使用此插件来编译类
npm i @babel/plugin-proposal-decorators -D 编译装饰器

module:{ // webpack 中模块
    rules:[ // 配置各种loader
     {
        test: /.js$/, // 匹配js文件
        use: { // 使用那些loader 遵从右到左(一行内) 从下到上(多行)， 使用时注意loader的顺序
          loader: 'babel-loader',
          options: { // loader 的配置项； 使用插件等
            presets: ['@babel/preset-env'],
            plugins: [
              ["@babel/plugin-proposal-decorators", { // 使用装饰器插件
                "legacy": true
              }],
              ["@babel/plugin-proposal-class-properties", { // class 插件
                "loose": true
              }],
              "@babel/plugin-transform-runtime",

            ]
          }
        },
        // include: '', // 匹配此路径中的js文件
        exclude: '/node_module/' // 排除node_module中的js文件
      }
    ]
}

另外：使用vsCode编辑器，当使用到装饰器时，可能会出现报错，可以在vsCode设置中搜索 experimentalDecorators 设置javascript.implicitProjectConfig.experimentalDecorators为true。

css处理

// 将css分离处理形成单独的css文件的插件
const miniCssExtractPlugin = require('mini-css-extract-plugin')


  plugins: [// 数组； 放着所有的插件
    new miniCssExtractPlugin({ // 
      filename: 'main.css'
    })
  ],
  
  // 模块
  module: {
    rules: [
      // 对各种 loader配置
      { // 样式配置 
        test: /.css$/, // 需要配置的文件； 通常用正则表达式匹配
        use: [ // 使用那些loader 遵从右到左(一行内) 从下到上(多行)
          // 'style-loader', // 创建style标签将js中的样式资源插入到head标签中
          // {// 也可以使用对象的形式进行配置
          //   loader: 'style-loader',
          //   options: {
          //     insert: 'body'
          //   }
          // },
          miniCssExtractPlugin.loader,
          'css-loader', // 将 css样式按照commonJs规则加载到js文件中 以字符串形式
        ]
      },
      {
        test: /.less$/,
        use: [
          miniCssExtractPlugin.loader,
          'css-loader',
          'less-loader', 
        ]
      },
   ]
}

有时需要考虑到css样式的兼容，会给css样式自动加上前缀，那么就会使用 postcss-loader， 需要注意的是，此loader需要在生成环境中使用

npm i postcss-loader autoprefixer -D // 自动给css加前缀 
// loader 中配置
    {
        test: /.less$/,
        use: [
          miniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader', // 在解析css前加前缀，要卸载css-loader之前
          'less-loader', 
        ]
      },

postcss-loader 还需要单独的配置文件 postcss.config.js 用来配置postcss-loader

module.exports = {
    plugins: [
      require('autoprefixer')（{/* 配置项 
            browsers: ['Android >= 4.0', 'iOS >= 7'] 浏览器的支持
        */}）
    ]
  }

需要配置浏览器的支持才能使自动加前缀生效，否则无法生效，除以上方法还可以在package.json中配置browserslist,browserslist与devDependencies同级

"browserslist": [
    "defaults",
    "not ie <= 8",
    "last 2 versions",
    "> 1%",
    "iOS >= 7",
    "Android >= 4.0"
  ]

一般在生产环境时，我们还要对css文件进行压缩，就需要配置优化项

const miniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
module.exports = {
    mode: "production", // 生产环境
      optimization: { // 优化项配置
        minimizer: [
              new TerserJSPlugin({}),  // OptimizeCSSAssetsPlugin 压缩css但会导致js不能压缩，因此需要下载js压缩插件
              new OptimizeCSSAssetsPlugin({}) // 压缩css 注意要在生产环境下， 
        ],
      },
}