webpack5 打包

详情查看源码

基本依赖

package.json

{
  "name": "webpack_web_moban",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "html-url-loader": "^1.0.5",
    "html-webpack-plugin": "^5.3.2",
    "less": "^4.1.1",
    "less-loader": "^10.0.0",
    "mini-css-extract-plugin": "^1.6.2",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
    "post-loader": "^2.0.0",
    "postcss-loader": "^6.1.0",
    "postcss-preset-env": "^6.7.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.41.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "@babel/core": "^7.14.8",
    "@babel/plugin-proposal-class-properties": "^7.14.5",
    "@babel/plugin-proposal-decorators": "^7.14.5",
    "@babel/plugin-transform-runtime": "^7.14.5",
    "@babel/preset-env": "^7.14.9",
    "@babel/runtime": "^7.14.8",
    "axios": "^0.21.1",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "css-loader": "^5.2.6",
    "jquery": "^3.6.0",
    "style-loader": "^3.0.0"
  },
  "browserslist": [
    "> 0.2%",
    "last 5 versions",
    "not ie <= 8"
  ]
}

webpack.config.js的配置

const { resolve, join } = require("path")
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin")    // html相关
const miniCssExtractPlugin = require("mini-css-extract-plugin")   // css相关
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');  // css压缩
const path = require("path");

module.exports = {
  mode: "development",   // 模式 production(会压缩代码) development  开发下使用development
  devtool: "eval-source-map",    // 利于调试 上线需要关闭 或 nosources-source-map
  devServer: {
    compress: true, //配置是否启用 gzip 压缩。boolean 为类型，默认为 false。
    port: 8080, // 配置端口
    open: true, // 自动打开浏览器
    // 本地服务器代理
    proxy: [
      {
        context: ['/api'],
        target: 'http://139.155.253.86:5000/',//接口域名
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          '^/api': ''
        }
      },
    ]
  },
  // entry:"./src/main.js", //打包入口,如果有几个入口，使用数组,这样最终会打包成一个js文件,如果使用对象，使用不同的key就会打包成多个js文件
  entry: {   // 合并js代码
    vendor: ["./src/js/jq.js", "./src/js/common.js"],
    index: "./src/js/index.js",
    home: "./src/js/home.js",
  },

  output: {    // 输出位置，及命名
    filename: "js/[name].js",
    path: resolve(__dirname, "build"),
  },

  module: {
    rules: [
      // 详细loader配置
      // 不同文件必须配置不同loader处理
      {
        // 匹配哪些文件
        test: /\.css$/,
        // 使用哪些loader进行处理
        use: [
          // use数组中loader执行顺序：从右到左，从下到上 依次执行
          // 创建style标签，将js中的样式资源插入进行，添加到head中生效
          {
            loader: miniCssExtractPlugin.loader,
            options: {
              // 当前的css所在的文件相对于打包后的根路径dist的相对路径
              publicPath: '../'
            }
          },
          // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
          'css-loader',
          "postcss-loader"
        ]
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: miniCssExtractPlugin.loader,
            options: {
              // 当前的css所在的文件相对于打包后的根路径dist的相对路径
              publicPath: '../'
            }
          },
          'css-loader',
          // 将less文件编译成css文件
          // 需要下载 less-loader和less
          'less-loader'
        ]
      },


      {
        test: /\.(gif|png|jpg)$/,
        // 需要下载url-loader,file-loader
        loader: 'url-loader',
        options: {
          outputPath: "img/",
          limit: 8 * 1024,
          esModule: false,
          name: '[hash:10].[ext]'
        }
      },
      {
        // 处理html文件中的img图片（负责引入img，从而能被url-loader进行处理）
        test: /\.html$/,
        loader: "html-url-loader",
        options: {
          esModule: false,
        }
      },
      // 处理高级语法
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }

    ]
  },


  plugins: [
    // HtmlWebpackPlugin 配置html文件需要导入的js文件
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html",
      chunks: ["index", "vendor"] // 导入合并后的js文件
    }),
    new HtmlWebpackPlugin({
      template: "./src/home.html",
      filename: "home.html",
      chunks: ["home", "vendor"]
    }),
    new miniCssExtractPlugin({
      filename: "css/[name].css"
    }),
    new OptimizeCssAssetsWebpackPlugin(),    // css代码压缩，开发环境下建议不使用
    // new CleanWebpackPlugin(), // 清除上次的打包，每次都会执行

   
  ],
  target: "web",

  resolve: {
    alias: {
      "@": path.join(__dirname, "./src/")
    }
  }

}

根目录下新建 babel.config.js

module.exports = {
  "presets": [
    "@babel/preset-env"
  ],
  plugins: [
    ["@babel/plugin-transform-runtime"],
    ["@babel/plugin-proposal-decorators", { "legacy": true }],  // 这里是关键
    ["@babel/plugin-proposal-class-properties", { "loose": false }],   // 这个是编译类的方法
  ]
}

根目录下新建 postcss.config.js

module.exports={
    plugins:[
        require("postcss-preset-env")()
    ]
}

说明

css和js不在html文件导入，而是在webpack.config.js 下的 plugins中配置

如果要对不同的html使用不同的css和js文件

css js 都在html对应的js中导入