webpack4基本使用(二)-css抽离-解析js

mini-css-extract-plugin 抽离css

1. 先引入
   let MiniCssExtractPlugin = require('mini-css-extract-plugin');
2. 在pulgins选项实例化

       plugins: [
           //抽离css样式
           new MiniCssExtractPlugin({
               filename: "[name].css",
               chunkFilename: "[id].css"
   
           })
       ]
   

3. 在 module 选项配置

       module: {
           rules: [
                {
                   test:/\.css$/,
                   use: [
                       MiniCssExtractPlugin.loader,
                       "css-loader",
                       "postcss-loader" 
                   ]
               }
           ]
       }
          
       
   

postcss-loader autoprefixer css加前缀

必须搭配使用 pack.json
 "browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
]
当css匹配到postcss-loader 会执行 postcss.config.js文件
module.exports = {
    plugins: [
        require("autoprefixer")
    ]
}   

{
    "autoprefixer": "^10.0.4",
    "postcss": "^8.1.14",
    "postcss-loader": "^4.1.0",
}

optimize-css-assets-webpack-plugin css压缩

使用后css压缩了但是 js缺没有压缩；所以要使用 UglifyJsPlugin,在优化选项 optimization

    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true
            }),
            new OptimizeCssAssetsPlugin()
        ]
    },

babel-loader @babel/core @/babel/preset-env 处理js es6 es7 转换成 es5

@/babel/preset-env : 处理js es6语法
@babel/plugin-proposal-decorators： 处理es7语法类装饰器
@babel/plugin-proposal-class-properties： 处理es6的类的定义
@babel/plugin-transform-runtime: 处理编译好的高版本js的方法不认识，
@babel/polyfill: 处理js补丁
{
"@babel/core": "^7.12.9",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-proposal-decorators": "^7.12.1",
"@babel/preset-env": "^7.12.7",
"@babel/plugin-transform-runtime": "^7.12.1",
"@babel/polyfill": "^7.12.1",
"babel-loader": "^8.2.2",
}
在对应的babel-loader 配置小插件

    {
        test:/\.js$/, //普通的loader
        use: [
            {
                loader: "babel-loader",
                options :{// 用babel-loader 需要把es6转es5
                    presets:[
                        "@babel/preset-env"
                    ],
                    plugins: [ //对应的小插件
                        ["@babel/plugin-proposal-decorators", { "legacy": true }],
                        ["@babel/plugin-proposal-class-properties", { "loose" : true }],
                        "@babel/plugin-transform-runtime"
                    ]
                },
                
            }
        ],
        include: path.resolve(__dirname, "src"),//需要转译目录
        exclude: /node_modules/           //不需要转译的目录

    }

}

"eslint": "^7.14.0", "eslint-loader": "^4.0.2", 校验 js规范

初始化文件
./node_modules/.bin/eslint --init

{
"eslint": "^7.14.0",
"eslint-loader": "^4.0.2",
}
{

test:/\.js$/,
use: {
    loader: "eslint-loader",
    options: {
        enforce: "pre",// 强制执行
    }
}

},

加载器 loader 分类

pre 前置loader
post 后置loader
normal 普通loader
import !jquery" 内联loader(不推荐使用)