webpack总结二

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

---

---

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的文件名
        })
    ]
}