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

js处理
为提高我们代码的兼容性，我们会将ES6语法转成ES5打包；处理js就或用到babel-loader
首先安装一下babel
npm i [email protected] @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 编译装饰器

 1 module:{ // webpack 中模块
 2     rules:[ // 配置各种loader
 3      {
 4         test: /\.js$/, // 匹配js文件
 5         use: { // 使用那些loader 遵从右到左(一行内) 从下到上(多行)， 使用时注意loader的顺序
 6           loader: 'babel-loader',
 7           options: { // loader 的配置项； 使用插件等
 8             presets: ['@babel/preset-env'],
 9             plugins: [
10               ["@babel/plugin-proposal-decorators", { // 使用装饰器插件
11                 "legacy": true
12               }],
13               ["@babel/plugin-proposal-class-properties", { // class 插件
14                 "loose": true
15               }],
16               "@babel/plugin-transform-runtime",
17 
18             ]
19           }
20         },
21         // include: '', // 匹配此路径中的js文件
22         exclude: '/node_module/' // 排除node_module中的js文件
23       }
24     ]
25 }

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

css处理

 1 // 将css分离处理形成单独的css文件的插件
 2 const miniCssExtractPlugin = require('mini-css-extract-plugin')
 3 
 4 
 5   plugins: [// 数组； 放着所有的插件
 6     new miniCssExtractPlugin({ // 
 7       filename: 'main.css'
 8     })
 9   ],
10   
11   // 模块
12   module: {
13     rules: [
14       // 对各种 loader配置
15       { // 样式配置 
16         test: /\.css$/, // 需要配置的文件； 通常用正则表达式匹配
17         use: [ // 使用那些loader 遵从右到左(一行内) 从下到上(多行)
18           // 'style-loader', // 创建style标签将js中的样式资源插入到head标签中
19           // {// 也可以使用对象的形式进行配置
20           //   loader: 'style-loader',
21           //   options: {
22           //     insert: 'body'
23           //   }
24           // },
25           miniCssExtractPlugin.loader,
26           'css-loader', // 将 css样式按照commonJs规则加载到js文件中 以字符串形式
27         ]
28       },
29       {
30         test: /\.less$/,
31         use: [
32           miniCssExtractPlugin.loader,
33           'css-loader',
34           'less-loader', 
35         ]
36       },
37    ]
38 }

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

 1 npm i postcss-loader autoprefixer -D // 自动给css加前缀 
 2 // loader 中配置
 3     {
 4         test: /\.less$/,
 5         use: [
 6           miniCssExtractPlugin.loader,
 7           'css-loader',
 8           'postcss-loader', // 在解析css前加前缀，要卸载css-loader之前
 9           'less-loader', 
10         ]
11       },

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

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

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

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

一般在生产环境时，我们还要对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 注意要在生产环境下， 
        ],
      },
}

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

猜你喜欢