webpack进阶配置

首先安装webpack

npm i webpack webpack-cli -D

新建webpack.config.js文件，对webpack进行配置

const path = require("path");

/* 
* loader下载后可以直接使用，plugin还需引入才能使用。
*/
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 独立生成css文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 压缩css插件
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");

// 设置生产环境变量
process.env.NODE_ENV = "development"

module.exports = {
    // 指定开发环境
    mode: "development",
    // 打包入口文件
    entry: "./src/index.js",
    // 出口文件  打包出口
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "dist")
    },
    // loader
    module: {
        rules: [
            // 配置loader
            // 每一个loader都是一个对象
            {
                // 匹配什么文件
                test: /\.css$/,
                // 使用什么loader进行处理
                use: [
                    // 执行步骤是从下面开始匹配
                    // "style-loader",
                    // 代替style  提取css创建单独文件
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    // 使用postcss-loader修改loader的配置
                    {
                        loader: "postcss-loader",
                        options: {
                            ident: "postcss",
                            plugins: () => [
                                // postcss的插件 通过这个插件找到package.json中browserslist的配置
                                // 默认执行的生产环境  上面设置了开发环境变量
                                require("postcss-preset-env"),
                                // 自动添加厂商前缀
                                require("autoprefixer")
                            ]
                        }
                    }
                ]
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ]
            },
            // 图片处理
            {
                test: /\.jpg|png|gif\$/,
                use: {
                    loader: "url-loader",   //url-loader才会有limit的情况
                    options: {
                        // 使用原名
                        name: "[name].[ext]",
                        // 生成图片路径
                        outputPath: "image/",
                        // 限制图片大小  小于会被打包进js  大于会生成一个图片文件
                        limit: 20480
                    }
                }
            },
            // 处理htmll文件中的img标签
            {
                test: /\.html$/,
                loader: "html-loader"
            },
            // 代码风格检查
            /* 
            packge.json中添加这个对象就会开启代码风格检测，不推荐开启，，
               "eslintConfig": {
                    "extends": "airbnb-base"
                }
            */
            {
                test: /\.js$/,
                // 不检查第三方库
                exclude: /node_modules/,
                loader: "eslint-loader",
                // eslint-config-airbnb-base eslint-plugin-import eslint
                options: {
                    fix: true
                }
            }
        ]
    },
    // 插件
    plugins: [
        // 自动创建一个空的html文件
        // 会自动引入打包的所有资源
        new HtmlWebpackPlugin({
            // 以index.html为模板  复制一个html文件  
            template: "./src/index.html"
        }),
        new MiniCssExtractPlugin(),
        // 压缩css
        new OptimizeCssAssetsWebpackPlugin()
    ],
    // 自动打包
    devServer: {
        contentBase: path.resolve(__dirname, "dist"),
        // 启动gzip压缩
        compress: true,
        // 端口号
        port: 3000,
        open: true
    }
}

插件以及loader的使用都需要安装
还有css兼容性配置，eslint代码风格检测都需要在packge.json中进行配置。

• packge.json

{
  "name": "day11",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  },
  "devDependencies": {
    "autoprefixer": "^9.8.0",
    "css-loader": "^3.5.3",
    "eslint": "^7.2.0",
    "eslint-config-airbnb-base": "^14.1.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.20.2",
    "file-loader": "^6.0.0",
    "html": "^1.0.0",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.3.0",
    "less-loader": "^6.1.0",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.0",
    "webpack-dev-server": "^3.11.0"
  },
  "scripts": {
    "//": "打包文件",
    "bundle": "webpack",
    "///": "打包并打开网页 热更新",
    "server": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "//": "css兼容性处理",
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini arr"
    ]
  }
}