webpack总结三

迈不过友情╰ 2022-10-30 06:28 174阅读 0赞

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

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

### 文章目录 ###

*   *  前面
     *  全局变量
     *  图片处理(三种方式)
     *  模块化
     *  样式兼容性

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

## 前面 ##

*  装载器loader(加载)：
 *  css-loader, less-loader, babel-loader, style-loader
 *  MiniCssExtractPlugin.loader
 *  插件plugin(加工)：
 *  optimize-css-assets-webpack-plugin
 *  terser-webpack-plugin
 *  html-webpack-plugin
 *  mini-css-extract-plugin

## 全局变量 ##

*  jquery $ 遍历dom
 *  工具：underscord lodash(防抖节流)
 *  在每一个组件中都可以使用它 import $ from ‘jquery’;
 *  使用全局变量 可以直接在组件中使用 webpack.ProvidePlugin
 *  导入前 打包的文件11.9k 导入后 334k 影响加载速度
 *  把三方的包排除去(前面讲vuecli打包)， 需要在html手动添加依赖包
 *  把三方的包拆开好处：1.分开加载 2.缓存

## 图片处理(三种方式) ##

*  在js中加载图片 需要file-loader  
    (默认使用es6模块化， 通过配置esModule：false改成commonjs模块化)
 *  通过css加载
 *  需要html直接作用 需要html-withimg-loader  
    html-withimg-loader需要配合file-loader使用并且不能够使用es6模块化
 *  若图片很多，每一张图片都需要一个http请求
 *  可以把小图片转成base64, 减少http请求，可以使用url-loader

## 模块化 ##

*  node commonjs
 *  es6 模块化  
    es6模块化有一个default，表示默认对象， import表示导入默认对象

## 样式兼容性 ##

*  css3，先实现自己的-webkit-xxxx, 所有的都实现了，可以去掉前缀
 *  兼容性插件就是给样式自动添加前缀
 *  需要postcss-loader, 在根目录添加postcss.config.js,  
    还要在package.json配置browserslist

//自定义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')
    let webpack = require("webpack")
    
    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:/\.html$/,
                    use: 'html-withimg-loader'
                },
                { 
                    test: /\.(png|jpg)$/,
                    use: { 
                        loader: 'url-loader',
                        options: { 
                            esModule: false,
                            limit: 200*1024 //小于800kb图片都转成base64
                        }
                    }
                    // use: { 
                    // loader: 'file-loader',
                    // options: { 
                    // esModule: false
                    // }
                    // }
                },
                { 
                    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', 'postcss-loader']
                },
                { 
                    test: /\.less$/,
                    // use: ['style-loader', 'css-loader', 'less-loader']
                    use: [MiniCssExtractPlugin.loader, 
                    'css-loader', 
                    'postcss-loader',
                    'less-loader']
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({ 
                template: './src/index.html', //模板
                filename: 'index.html',       //打包后模板名字
            }),
            new MiniCssExtractPlugin({ 
                filename: 'index.css'  //抽出css的文件名
            }),
            new webpack.ProvidePlugin({  //每个组件中注入
                $: 'jquery'
            })
        ],
        externals: {   //打包时忽略
            jquery: '$'
        }
    }