webpack4 版本基础环境
静态文件编译,ts,js,scss,less编译,浏览器后缀

视频

www.bilibili.com/video/BV1o3…

创建下面3个文件

// package.js
{
  "name": "webpack4_base",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack --mode production",
    "serve": "npx webpack-dev-server"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
  "devDependencies": {
    "typescript": "4.6.3",
    "ts-loader": "8.0.11",
    "css-loader": "3.4.2",
    "file-loader": "3.0.1",
    "html-loader": "0.5.5",
    "html-webpack-plugin": "3.2.0",
    "clean-webpack-plugin": "1.0.0",
    "less": "3.0.0",
    "less-loader": "5.0.0",
    "sass": "1.30.0",
    "sass-loader": "10.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.1.3",
    "url-loader": "3.0.0",
    "webpack": "4.41.6",
    "webpack-cli": "3.3.11",
    "webpack-dev-server": "3.10.3"
  }
}

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}   

// webpack.config.js
const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const optimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

process.env.NODE_ENV = "production"; //指定环境为生产环境,postcss兼容时会选择生产的配置

module.exports = {
  entry: resolve(__dirname, "./index.ts"), //入口文件
  devServer: {
    //开发服务的配置,只打包到内存,不做实际打包,作用于开发时实时预览
    open: true, // 是否自动打开浏览器
    contentBase: resolve(__dirname, "dist"), //打包后的文件路径,跟出口文件路径一致
    compress: true, //是否开启gzip 压缩
    port: "888", //启动后的端口
    index: "index.html", //索引文件的文件名,默认就是index.html,配置一下应该启动会快一点..
    publicPath: "/", //静态资源访问路径 默认就是/ => 比如: ip/build.js (文档有说明)
    hot: true, //开启HMR
    overlay: true, //代码出错开启全屏错误提示
    watchContentBase: true, // 监视contentBase目录下所有文件
    watchOptions: {
      ignored: /node_modules/, //忽略文件
    },
    clientLogLevel: "none", //不要显示启动服务的日志信息
    // quiet: true,//除了初始启动信息之外的任何内容都不会被打印到控制台 TODO :小项目没必要关闭,还可以检查一下打包的信息
  },
  output: {
    //打包出口配置
    filename: "js/main.js", //出口文件的文件名
    path: resolve(__dirname, "dist"), //所有打包后的文件放入dist文件夹下
    chunkFilename: "js/[name]_chunk_[hash:6].js", // TODO :如果不配置改命名,那么做了代码分割的那些包命名就会成为一个个数字 0.js
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: "ts-loader",
      },
      {
        oneOf: [
          //loader已经编译过的,不会再进行编译,如果存在还需要编译的情况,可以把对象单独抽出去
          {
            test: /\.css$/i,
            use: [
              // 'style-loader',//将出口文件里的css插入到html中的style标签中
              {
                loader: MiniCssExtractPlugin.loader,
                options: {
                  publicPath: "../", // TODO :因为css单独提取是配置了提取到css文件夹下,也就是多出了一层css,所以这里也要相应的回退一层
                },
              }, //将出口文件中的css内容编译成css文件,并引入html文件中
              "css-loader", //将入口文件中引入的css文件编译成css内容放入到出口文件
              {
                loader: "postcss-loader", //css兼容处理
                options: {
                  ident: "postcss",
                  plugins: () => [
                    require("postcss-preset-env")(), //自动读取package.json中的兼容配置
                  ],
                },
              },
            ],
          },
          {
            test: /\.less$/i, // TODO :less不要跟css文件混搭使用
            use: [
              {
                loader: MiniCssExtractPlugin.loader,
                options: {
                  publicPath: "../",
                },
              },
              "css-loader",
              "less-loader", //编译less文件
              {
                loader: "postcss-loader",
                options: {
                  ident: "postcss",
                  plugins: () => [require("postcss-preset-env")()],
                },
              },
            ],
          },
          {
            test: /\.scss$/i, // TODO :scss文件跟css文件不要混合使用,也就是不要再css文件引入scss文件,反过来也一样
            use: [
              // 'style-loader',
              {
                loader: MiniCssExtractPlugin.loader,
                options: {
                  publicPath: "../", // TODO :因为css单独提取是配置了提取到css文件夹下,也就是多出了一层css,所以这里也要相应的回退一层
                },
              },
              "css-loader",
              "sass-loader",
              {
                loader: "postcss-loader",
                options: {
                  ident: "postcss",
                  plugins: () => [require("postcss-preset-env")()],
                },
              },
            ],
          },

          {
            test: /\.(png|jpg|gif)$/i,
            loader: "url-loader", // 处理图片路径 TODO :无法处理html文件的图片,需要搭配html-loader
            options: {
              limit: 0, //小于0k编译成base64 优点:减少服务请求(服务压力) 缺点:文件变大,加载变慢
              esModule: false, // TODO :html-loader用的commonjs写法引入图片,需要将url-loader esmodule写法关闭,否则html无法解析
              name: "img/[name].[hash:6].[ext]", //打包后的文件名
            },
          },
          {
            test: /\.html$/i, //处理html文件的图片
            loader: "html-loader",
          },
          {
            exclude: /\.(html|png|jpg|gif|less|css|js|ts)$/i, //一定要将js排除,否则会冲突
            loader: "file-loader",
            options: {
              name: "asstes/[name].[hash:6].[ext]", //打包后的文件名
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      //以一个模板为基础复刻一个html文件为index.html,并且自动引入出口js文件
      template: "./index.html", //模板路径
      minify: {
        //模板的压缩配置 (文档有说明(
        collapseWhitespace: false, //去除空白区
        removeComments: true, //去除注释
      },
    }),
    new MiniCssExtractPlugin({
      //将css抽离成单个css文件,并且自动引入到index.html中
      filename: "css/[name].[hash:6].css",
    }),
    new optimizeCssAssetsWebpackPlugin(), //压缩css文件
    new CleanWebpackPlugin("./dist"), //每次打包清理掉前一次打包的文件
  ],
  resolve: {
    alias: {
      // 路径别名
      "@js3": resolve(__dirname, "./src/js3"),
    },
    extensions: [".wasm", ".mjs", ".js", ".json", ".ts"], // 这里就是自动识别后缀的配置,不写后缀会根据这个顺序来自动识别
    modules: [resolve(__dirname, "./node_modules"), "node_modules"], // TODO :提高解析速度,告诉webpack解析不带路径的模块式默认去哪里找
  },
};

运行

// 安装依赖
npm install
// 启动
npm run serve
// 打包
npm run build