webpack多个Html,Webpack构建多页面应用配置

安装依赖

"devDependencies": {

"@babel/core": "^7.12.3",

"@babel/preset-env": "^7.12.1",

"@babel/preset-react": "^7.12.1",

"babel-loader": "^8.1.0",

"clean-webpack-plugin": "^3.0.0",

"css-loader": "^5.0.0",

"css-minimizer-webpack-plugin": "^1.1.5",

"html-webpack-plugin": "^4.5.0",

"mini-css-extract-plugin": "^1.2.0",

"node-sass": "^4.14.1",

"sass-loader": "^10.0.4",

"style-loader": "^2.0.0",

"webpack": "^4.44.2",

"webpack-cli": "^3.3.12",

"webpack-dev-server": "^3.11.0",

"webpack-merge": "^5.2.0"

},

"dependencies": {

"react": "^17.0.1",

"react-dom": "^17.0.1",

"react-redux": "^7.2.2",

"redux": "^4.0.5"

}

基础配置(webpack.base.config.js)

const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {

// 入口配置：string｜array｜object

// string的写法：生成一个js文件

// entry: './src/main.js',

// array的写法：生成一个js文件

// entry: ["./src/main.js", "./src/root.js"],

// entry: ["./src/root.js", "./src/main.js"],

// object的写法:生成多个js文件，有多少对key-value对，就有多少个js文件

entry: {

home: './src/views/home/index.js',

product: './src/views/product/index.js',

about: './src/views/about/index.js',

},

output: {

filename: "js/[name].js",

path: path.join(__dirname, "../dist"),

publicPath: "/",

},

plugins: [

// new HtmlWebpackPlugin()构建的实例，会创建一个html页面

new HtmlWebpackPlugin({

template: path.join(__dirname, "../public/index.html"),

filename: "home.html",

title: "首页",

// 页面需要那个模块的js和css

chunks: ['home'],

// 除去哪些chunks都需要

// excludeChunks: ['home']

}),

new HtmlWebpackPlugin({

template: path.join(__dirname, "../public/index.html"),

filename: "product.html",

title: "产品",

chunks: ['product'],

}),

new HtmlWebpackPlugin({

template: path.join(__dirname, "../public/index.html"),

filename: "about.html",

title: "关于",

chunks: ['about'],

}),

],

module: {

rules: [

{

test: /\.(js|jsx)$/,

loader: "babel-loader",

exclude: /node_modules/,

options: {

plugins: [],

presets: ["@babel/preset-env", "@babel/preset-react"],

},

},

],

},

resolve: {

// 可以省略的文件后缀

extensions: [".js", ".json"],

// 路径别名

alias: {

"@": path.join(__dirname, "../src"),

"@pages": path.join(__dirname, "../src/pages"),

"@components": path.join(__dirname, "../src/components"),

},

},

};

开发环境配置(webpack.dev.config.js)

const path = require("path");

const baseConfig = require("./webpack.base.config");

const {merge} = require('webpack-merge');

const {HotModuleReplacementPlugin} = require('webpack');

module.exports = merge(baseConfig, {

mode:"development",

plugins: [

new HotModuleReplacementPlugin()

],

module: {

rules: [

{

test: /\.css$/,

use: ['style-loader', 'css-loader']

},

{

test: /\.scss$/,

use: ['style-loader', 'css-loader', 'sass-loader']

},

{

test: /\.(jpg|jpeg|png|gif|svg|webp)$/,

loader: 'file-loader'

}

]

},

devServer: {

open: false,

contentBase: path.join(__dirname, "./dist"),

inline: true,

hot: true

},

});

生产环境配置(webpack.pro.config.js)

const { merge } = require("webpack-merge");

const baseConfig = require("./webpack.base.config");

const {CleanWebpackPlugin} = require('clean-webpack-plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');//抽离css

const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');//压缩css

const TerserWebpackPlugin = require('terser-webpack-plugin');//解析js

module.exports = merge(baseConfig, {

mode: "production",

plugins: [

new CleanWebpackPlugin(),

new MiniCssExtractPlugin({

filename: 'css/[name].css'

})

],

module: {

rules: [

{

test: /\.css$/,

use: [MiniCssExtractPlugin.loader, 'css-loader']

},

{

test: /\.scss$/,

use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']

},

{

test: /\.(jpg|jpeg|png|gif|svg|webp)$/,

loader: 'url-loader',

options: {

limit: 1024*1024*1

}

}

]

},

optimization: {

minimizer: [

new TerserWebpackPlugin(),

new CssMinimizerWebpackPlugin(),

]

}

});

Like

Like

Love

Haha

Wow

Sad

Angry