webpack乱写的笔录

webpack安装:

1. npm init -y #初始化项目
2. npm i webpack webpack-cli -g #在全局环境下安装webpack打包工具
3. npm i webpack webpack-cli #在项目下安装webpack

/**
 * 采用commonjs的模块处理方式
 * 1. loader: 下载 可以直接使用
 * 2. plugin: 下载 引入才可以使用
 */
const { resolve } = require("path");
// 引入处理HTML文件的处理插件(事先需要安装)
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 引入用于抽取css样式成单独文件的插件(事先需要安装)
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 设置nodeJS环境变量, 是css兼容性处理从插件能选择使用指定环境(如果设置为development则为开发环境，如果没有设置则为生成环境)
process.env.NODE_ENV = "development";

/**
 * webpack五个核心概念，分别对应5个不同的功能属性
 * 1.entry: 入口文件
 * 2.output: 输出位置
 * - filename: 文件名
 * - path: 打包好后的文件放在的绝对路径位置
 * 3.module: loader规则工具
 * 4.plugins: 插件
 * 5.mode: 模式
 * - development 开发模式
 * - production  生成环境模式
 */
module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "built.js",
        path: resolve(__dirname, "build")
    },
    module: {
        rules:[
            {
                test: /\.css$/,
                use:[
                    // "style-loader",  // 创建style标签，将样式引入
                    MiniCssExtractPlugin.loader, // 使用该loader取代style-loader,作用: 提取css成单独文件
                    "css-loader"   // 将css文件整合js文件中
                ]
            },
            {
                test: /\.less$/,
                use:[
                    // "style-loader", // 创建style标签，将样式引入
                    MiniCssExtractPlugin.loader, // 使用该loader取代style-loader,作用: 提取css成单独文件
                    "css-loader",   // 将css文件整合js文件中
                    /* css兼容性处理: 使用postcss --> 需要postcss-loader和postcss-preset-env 依赖包
                    使postcss找到package.json中的browerslist属性的配置，通过配置来加载指定的css兼容性样式
                      "browserslist": { // github上有详细的参数，可以去GitHub上翻翻
                          "development": [ // 开发模式下兼容chrome、firefox、safari最后版本的浏览器
                            "last 1 chrome version",
                            "last 1 firefox version",
                            "last 1 safari version"
                          ],
                          "production": [ // 生产环境下，不需要兼容那些被淘汰的
                          // 默认使用的该生产环境的配置， 与下面的mode没啥关系
                          // 所以如果想使用开发环境下的css兼容性模式，则需要设置node环境变量: process.env.NODE_ENV = developement
                            ">0.2%",
                            "not dead",
                            "not op_mini all"
                          ]
                      }
                    */
                    {
                        loader: "postcss-loader",
                        options: {
                            ident: "postcss",
                            plugins: ()=>[  // 返回的是插件列表, 得是一个数组
                                // 使用postcss插件
                                require("postcss-preset-env")()
                            ]
                        }
                    },
                    "less-loader"   // 将less语法编译成css
                ]
            },
            {
                test: /\.(png|gif|jpg|jpeg)$/,
                loader: 'url-loader',   // url-loader 依赖file-loader模块，所以安装时也需要安装file-loader
                options: {
                    limit: 8 * 1024, // 当图片大小小于8kb的时候，将图片进行base64编码进行打包
                    name: '[hash:10].[ext]', // name属性用于处理打包后的img图片的文件命名格式: 取hash前十位，以原来文件格式结尾
                    esModule: false // 默认使用es6引入模块方式解析
                }
            },
            {
                test: /\.html$/,
                // 用于处理html文件中img路径的loader
                // 默认该loader使用commonjs处理html文件中的资源引入路径
                // 所以需要让url-loader关闭es模块(即options中加入esModule:false，让url-loader使用commonjs去解析路径)
                loader: 'html-loader'
            },
            {
                // 可使用排除方式来加入其它资源文件
                exclude: /\.(css|html|less|js|png|jpeg|jpg|gif)$/,
                loader: 'file-loader',  // 该loader因为在url-loader安装时已经安装
                options: {
                    name: '[hash:10].[ext]'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"    // 使用src/index.html作为html模板页面
            // filename: "index.html"       // 打包时的html文件名
        }),
        new MiniCssExtractPlugin({
            filename: "css/build.css"   // 将输出的文件名放置在css目录下，并重命名为build.css
        })
    ],
    mode: 'development',
    devServer: { // 执行需要webpack-dev-server依赖，所以需要安装后才能使用: npx webpack-dev-server
        // 这里暂时有个问题: JSON文件引入貌似会出问题，明天解决……
        // 执行热部署的位置路径
        contentBase: resolve(__dirname, 'build'),
        // 执行是否使用gzip压缩
        compress: true,
        // 热部署的端口号
        port: 3000,
        open: true // 第一次启动，自动打开浏览器
    }
}