webpack总结三

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

---

---

前面

• 装载器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: '$'
    }
}