webpack总结二

爱被打了一巴掌 2022-10-30 06:27 200阅读 0赞

故心故心故心故心小故冲啊

--------------------

### 文章目录 ###

*   *  css文件打包
     *  loader执行顺序
     *  loader与plugin区别
     *  less
     *  css抽取
     *  js,css压缩处理
     *  依赖包降级处理
     *  es6打包支持

--------------------

## css文件打包 ##

*  css怎么引入？ 是在index.js引入， 因为webpack是以js为入口
 *  webpack默认不支持css打包，若要支持需要css-loader
 *  cnpm i -S css-loader
 *  配置css-loader, 见webpack.config.js
 *  css-loader只是装载css文件，不会把装载后的文件整合到html上
 *  需要整合到html上，需要style-loader, 作用：生成style

## loader执行顺序 ##

*  从右到左
 *  从下到上

## loader与plugin区别 ##

*  装载器loader, 装载并转换(css,less) ,  
    Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。  
    Plugin可以扩展webpack的功能，让webpack具有更多的灵活性
 *  plugin, 文件的处理(压缩，混淆，合并等)

## less ##

*  less-loader 装载并把less语法转css
 *  cnpm i -S less less-loader

## css抽取 ##

*  把css抽取出成一个单独的文件， style-loader是整合到html
 *  mini-css-extract-plugin

## js,css压缩处理 ##

*  js压缩plugin: terser-webpack-plugin
 *  css压缩plugin: optimize-css-assets-webpack-plugin
 *  默认webpack支持js打包压缩(生产模式)，添加optimize-css-assets-webpack-plugin后,  
    webpack的js打包压缩无效。就需要配置terser插件

## 依赖包降级处理 ##

*  cnpm i -S xxx 默认安装最新版本
 *  cnpm i -S xxx@2 表示安装主版本为2的最新版本

## es6打包支持 ##

*  babel-loader装载转换器(es6,es7,es8->es5)
 *  nodejs部分支持es6

//自定义webpack
    let path = require('path'); //path node
    let MiniCssExtractPlugin = require('mini-css-extract-plugin') //样式抽离插件
    let HtmlWebpackPlugin = require("html-webpack-plugin");
    let TerserPlugin = require('terser-webpack-plugin');
    let OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin')
    
    module.exports = {   //node模块化的写法
        optimization: { 
            minimizer: [new TerserPlugin({ }), new OptimizeCssPlugin({ })]
        },
        entry: "./src/index.js",  //入口
        mode: 'development',  //开发 发布production
        output: {                  //出口
            filename: "index.js", //指定输出名字
            //node __dirname 当前目录
            path: path.resolve(__dirname, "dist")  //指定输出目录
        },
        devServer: {   //web服务配置
            port: 8081,
            open: true,  //服务启动时自动打开默认浏览器
            progress: true, //进度条
            contentBase: './dist'  //http容器的根目录
        },
        module: { 
            rules: [
                { 
                    test: /\.js$/,//处理以js文件结尾
                    use: { 
                        loader: 'babel-loader',
                        options: { 
                            presets: [  //babelrc
                                "@babel/preset-env"
                            ],
                            "plugins": [
                                ["@babel/plugin-proposal-decorators", {  "legacy": true }],
                                ["@babel/plugin-proposal-class-properties", {  "loose" : true }]
                            ]
                        }
                    }
                },
                { 
                    test: /\.css$/,  //以css结尾的文件
                    // use: ['style-loader', 'css-loader'] //装载器loader
                    use: [MiniCssExtractPlugin.loader, 'css-loader']
                },
                { 
                    test: /\.less$/,
                    // use: ['style-loader', 'css-loader', 'less-loader']
                    use: [MiniCssExtractPlugin.loader, 
                    'css-loader', 
                    'less-loader']
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({ 
                template: './src/index.html', //模板
                filename: 'index.html',       //打包后模板名字
            }),
            new MiniCssExtractPlugin({ 
                filename: 'index.css'  //抽出css的文件名
            })
        ]
    }