Webpack使用傳統工程項目

說明

這是最近在學習和實踐webpack的一次學習筆記,有不足歡迎指正
這裏不涉及前端框架部分,單純是使用webpack

工程目錄結構

webpack-demo (學習工程目錄)
|---config
|------webpack.base.js (用於公用配置)
|------webpack.dev.js (用於開發配置)
|------webpack.pro.js (用於發佈配置)
|---dist
|---src
|------public (靜態資源文件)
|----------imgs
|----------js
|----------fonts
|----------less
|----------html
|------index.html (首頁)
|------main.js (入口文件)

咱們來看看配置吧

package.json

{
  "scripts": {
    "build": "webpack --config config/webpack.pro.js",
    "dev": "webpack-dev-server --config config/webpack.dev.js"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.5.2",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.2.0",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "style-loader": "^1.1.3",
    "url-loader": "^4.1.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3",
    "webpack-merge": "^4.2.2"
  }
}

針對單入口

//file=>config=>webpack.base.js

//用於公用環境配置
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "js/bundle.js",
    // publicPath: "./",
  },
  module: {
    rules: [
      {
        test: /\.(css|less)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            /*         options: {
              publicPath: "../",
            }, */
          },
          "css-loader",
          "less-loader",
        ],
      },
      {
        test: /\.(png|jpg|gif|jfif)$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8 * 1024,
              name: "[name].[ext]",
              publicPath: "../imgs",
              outputPath: "imgs/",
            },
          },
        ],
      },
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },

  plugins: [
    new HtmlWebpackPlugin({ template: "./src/index.html" }),
    new MiniCssExtractPlugin({ filename: "css/index.css" }),
  ],
};

//file=>config=>webpack.dev.js

//用於開發環境配置
const base = require("./webpack.base.js"); //非src 旨在node模塊
const merge = require("webpack-merge");
const path = require("path");
module.exports = merge(base, {
  mode: "development",
  devServer: {
    contentBase: path.join(__dirname, "../dist"),
    compress: true,
    port: 3000,
    open: true,
    hot: true,
  },
});

//file=>config=>webpack.pro.js

//用於生產環境配置
const base = require("./webpack.base.js");
const merge = require("webpack-merge");
module.exports = merge(base, {
  mode: "production",
});

針對多入口

只須要改變webpack.base.js下的入口爲對象格式便可

entry: {
    main: "./src/main.js",
    index: "./src/js/index.js",
  },

關於多個js模塊引入共有模塊 能夠用webpack自帶的spilt代碼分割便可,參見:這裏推薦若是自己共有模塊小於30k 能夠用,可是自己模塊太大就不必多一次請求了

optimization: {
    splitChunks: {
      chunks: "all",
    },
  },

這裏只要添加到webpack.base.js裏便可,plugins下面