webpack4配置，构建多页面应用（收藏）
webpack4配置，构建多页面应用
- package.json
- webpack.base.config.js
- webpack.dev.config.js
- webpack.prod.config.js
- 目录
- 说明
package.json
{
"name": "dl-otc-es6",
"version": "1.0.0",
"description": "独龙OTC",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --mode development --config ./build/webpack.dev.config.js",
"build": "webpack --mode production --config ./build/webpack.prod.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.3.1",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^1.0.1",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"image-webpack-loader": "^4.5.0",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.4.4",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-loader": "^3.0.0",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "^2.0.1",
"url-loader": "^1.1.2",
"vue": "^2.5.17",
"vue-loader": "^15.4.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10",
"webpack-merge": "^4.1.4"
}
}
webpack.base.config.js
const path = require('path'); // node路径模块
const HTMLWebpackPlugin = require('html-webpack-plugin'); // HTML导出模块
const config = require('../config/pages.config'); // 多页面配置文件
const VueLoaderPlugin = require('vue-loader/lib/plugin'); // vue解析模块
const MiniCssExtractPlugin = require("mini-css-extract-plugin") ; // css提取模块
const CleanWebpackPlugin = require('clean-webpack-plugin'); // 删除指定目录模块
let HTMLPlugins = [];
let Entries = {};
config.HTMLDirs.forEach(item => {
const htmlPlugin = new HTMLWebpackPlugin({
title: item.title, // 生成的html页面的标题
filename: `${item.page}.html`, // 生成到dist目录下的html文件名称，支持多级目录（eg: `${item.page}/index.html`）
template: path.resolve(__dirname, `../template/index.html`), // 模板文件，不同入口可以根据需要设置不同模板
chunks: [item.page, 'vendor'], // html文件中需要要引入的js模块，这里的 vendor 是webpack默认配置下抽离的公共模块的名称
minify: {
collapseWhitespace: true, // 压缩空白
removeAttributeQuotes: true // 删除属性双引号
}
});
HTMLPlugins.push(htmlPlugin);
Entries[item.page] = path.resolve(__dirname, `../src/pages/${item.page}/index.js`); // 根据配置设置入口js文件
});
module.exports = {
entry: Entries, // 多入口
output: {
filename: 'js/[name].[hash:8].js',
path: path.resolve(__dirname, '../dist'),
publicPath: ''
},
plugins: [
new VueLoaderPlugin(), // vue解析器
new MiniCssExtractPlugin({ // 提取样式到单独的文件中
filename: "css/[name].[hash:8].css",
chunkFilename: "[id].css"
}),
...HTMLPlugins // 多页面输出
],
module: {
rules: [
{
test: /\.vue$/,
exclude: /node_modules/,
use: ['vue-loader']
},
{
test: /\.css$/,
exclude: /node_modules/,
include: path.join(__dirname, '../src'),
use: [
{
loader: MiniCssExtractPlugin.loader, // 提取less为单独的样式文件\
options: {
publicPath: '../'
}
},
'style-loader',
'css-loader',
'postcss-loader'
]
},
{
test:/\.less$/,
exclude: /node_modules/,
include: path.join(__dirname, '../src'),
use:[
{
loader: MiniCssExtractPlugin.loader, // 提取less为单独的样式文件\
options: {
publicPath: '../'
}
},
'css-loader',
'postcss-loader',
'less-loader'
]
},
{
test: /\.js$/,
exclude: /node_modules/,
include: path.join(__dirname, '../src'),
use: ["babel-loader"]
},
{
test: /\.(png|jpg|jpeg|gif)$/,
exclude: /node_modules/,
include: path.join(__dirname, '../src'),
use: [{
loader: "url-loader",
options: {
name: '[name].[hash:7].[ext]',
limit: 10000, // 表示小于10kb的图片转为base64，否则为路径
outputPath: "images"
}
},
{ //压缩图片要在url-loader之后使用
loader:'image-webpack-loader',
options:{
bypassOnDebug: true
}
}]
},
{
test: /\.(eot|svg|ttf|woff)$/,
exclude: /node_modules/,
include: path.join(__dirname, '../src'),
use: ['url-loader']
}
]
},
// 对控制台输出日志的简化
stats: {
modules: false, // 是否添加构建模块信息
children: false // 是否添加 children 信息
}
}
webpack.dev.config.js
const path = require("path");
const merge = require("webpack-merge");
const webpackConfigBase = require("./webpack.base.config");
const webpackConfigDev = {
devtool: 'cheap-module-eval-source-map', // 指定加source-map的方式
mode: 'development',
devServer:{
// 设置服务器访问的基本目录
contentBase: path.resolve(__dirname,'../dist'), //最好设置成绝对路径
// 设置服务器的ip地址,可以是localhost
host: '192.168.60.105',
// 设置端口
port: 8090,
// 设置自动拉起浏览器
open: false
},
watch: true, // 开启监听文件更改，自动刷新
watchOptions: {
ignored: /node_modules/, // 忽略不用监听变更的目录
aggregateTimeout: 500, // 防止重复保存频繁重新编译,500毫米内重复保存不打包
poll:1000 // 每秒询问的文件变更的次数
}
}
module.exports = merge(webpackConfigBase, webpackConfigDev);
webpack.prod.config.js
const path = require("path");
const webpackConfigBase = require("./webpack.base.config");
const CleanWebpackPlugin = require('clean-webpack-plugin'); // 删除指定目录模块
const merge = require("webpack-merge");
const UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin");
const optimizeCss = require("optimize-css-assets-webpack-plugin");
const webpackConfigProd = {
mode: "production",
plugins: [
new CleanWebpackPlugin(["dist"], { // 此处配置根目录
root: path.resolve(__dirname, '../'), // 根目录
verbose: true, // 开启在控制台输出信息
}),
new optimizeCss()
],
externals: {
vue: 'vue'
},
optimization: {
minimizer: [
new UglifyjsWebpackPlugin({
exclude: /\.min\.js$/,
cache: true,
parallel: true,
sourceMap: false,
extractComments: false,
uglifyOptions: {
compress: {
unused: true,
warnings: false,
drop_debugger: true
},
output: {
comments: false
}
}
})
]
}
};
module.exports = merge(webpackConfigBase, webpackConfigProd);
目录
说明
.babelrc 文件的内容
{
"presets": ["env"]
}
postcss.config.js 样式添加前缀的配置文件
// 自动添加CSS浏览器前缀，配置文件，设置支持的浏览器类型
// 需要安装 postcss-loader autoprefixer 两个插件
module.exports = {
plugins: [
require('autoprefixer')({
"browsers": [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
]
})
]
};
config文件夹里的配置是配置多页面的数据。
module.exports = {
HTMLDirs: [
{
page: 'index',
title: '首页'
},
{
page: 'about',
title: '关于我们'
}
]
}
template文件夹是存放html模板，可以每个页面一个不同的html模板
<html>
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %>title>
<div id="root">div>
head>
<body>
body>
html>
注：爱护原创，转载请说明出处