在本系列文章的基础上，我对脚手架配置进行了一些优化整理，基于 Webpack4 和 Vue，下面是文章链接：
基于 Webpack4 + Vue 的多页应用解决方案（一）
基于 Webpack4 + Vue 的多页应用解决方案（二）
本文将提供我项目中一份完整的配置文件，供大家参考。
package.json
{
"name": "xxx",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "set NODE_ENV=dev && webpack-dev-server --open",
"build": "set NODE_ENV=prod && webpack -p",
"lint": "set NODE_ENV=lint && webpack-dev-server --open",
"serve": "http-server ./dist -p 8888 -o",
"serve2": "http-server ./dist -p 8888"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.1.3",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-es2015-spread": "^6.22.0",
"babel-preset-env": "^1.6.0",
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.28.7",
"eslint": "^4.5.0",
"eslint-loader": "^1.9.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.30.1",
"http-server": "^0.10.0",
"postcss-loader": "^2.0.6",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1",
"webpack-merge": "^4.1.0"
},
"dependencies": {}
}
.gitignore
node_modules
dist
npm-debug.log
.babelrc
{
"plugins": ["transform-es2015-spread"]
}
.eslintrc.js
module.exports = {
env: {
browser: true,
commonjs: true,
es6: true,
node: true,
},
extends: 'eslint:recommended',
parserOptions: {
sourceType: 'module',
},
rules: {
'comma-dangle': ['error', 'always-multiline'],
indent: ['error', 2],
'linebreak-style': ['error', 'unix'],
quotes: ['error', 'single'],
semi: ['error', 'always'],
'no-unused-vars': ['warn'],
'no-console': 0,
},
};
postcss.config.js
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['last 5 version','Android >= 4.0'],
//是否美化属性值 默认：true
cascade: true,
//是否去掉不必要的前缀 默认：true
remove: true
}
}
}
config.js
module.exports = {
HTMLDirs:[
"index",
"company_intro",
"enterprise_culture",
"hornors",
"news_center",
"news_item",
"product",
"schools",
"operate",
"cooperate",
"join_us",
"contact_us",
"investment"
],
cssPublicPath:"../",
imgOutputPath:"img/",
cssOutputPath:"./css/styles.css",
devServerOutputPath:"../dist",
}
webpack.config.js
// 获取环境命令，并去除首尾空格
const env = process.env.NODE_ENV.replace(/(\s*$)|(^\s*)/ig,"");
// 根据环境变量引用相关的配置文件
module.exports = require(`./config/webpack.config.${env}.js`)
webpack.config.base.js
const path = require("path");
// 引入插件
const HTMLWebpackPlugin = require("html-webpack-plugin");
// 清理 dist 文件夹
const CleanWebpackPlugin = require("clean-webpack-plugin")
// 抽取 css
const ExtractTextPlugin = require("extract-text-webpack-plugin");
// 引入多页面文件列表
const config = require("./config");
// 通过 html-webpack-plugin 生成的 HTML 集合
let HTMLPlugins = [];
// 入口文件集合
let Entries = {}
// 生成多页面的集合
config.HTMLDirs.forEach((page) => {
const htmlPlugin = new HTMLWebpackPlugin({
filename: `${page}.html`,
template: path.resolve(__dirname, `../app/html/${page}.html`),
chunks: [page, 'commons'],
});
HTMLPlugins.push(htmlPlugin);
Entries[page] = path.resolve(__dirname, `../app/js/${page}.js`);
})
module.exports = {
entry:Entries,
devtool:"cheap-module-source-map",
output:{
filename:"js/[name].bundle.[hash].js",
path:path.resolve(__dirname,"../dist")
},
// 加载器
module:{
rules:[
{
// 对 css 后缀名进行处理
test:/\.css$/,
// 不处理 node_modules 文件中的 css 文件
exclude: /node_modules/,
// 抽取 css 文件到单独的文件夹
use: ExtractTextPlugin.extract({
fallback: "style-loader",
// 设置 css 的 publicPath
publicPath: config.cssPublicPath,
use: [{
loader:"css-loader",
options:{
// 开启 css 压缩
minimize:true,
}
},
{
loader:"postcss-loader",
}
]
})
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.(png|svg|jpg|gif)$/,
use:{
loader:"file-loader",
options:{
// 打包生成图片的名字
name:"[name].[ext]",
// 图片的生成路径
outputPath:config.imgOutputPath
}
}
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use:["file-loader"]
}
],
},
plugins:[
// 自动清理 dist 文件夹
new CleanWebpackPlugin(["dist"]),
// 将 css 抽取到某个文件夹
new ExtractTextPlugin(config.cssOutputPath),
// 自动生成 HTML 插件
...HTMLPlugins
],
}
webpack.config.dev.js
// 引入基础配置文件
const webpackBase = require("./webpack.config.base");
// 引入 webpack-merge 插件
const webpackMerge = require("webpack-merge");
// 引入配置文件
const config = require("./config");
// 合并配置文件
module.exports = webpackMerge(webpackBase,{
// 配置 webpack-dev-server
devServer:{
// 项目根目录
contentBase:config.devServerOutputPath,
// 错误、警告展示设置
overlay:{
errors:true,
warnings:true
}
}
});
webpack.config.prod.js
// 引入基础配置
const webpackBase = require("./webpack.config.base");
// 引入 webpack-merge 插件
const webpackMerge = require("webpack-merge");
// 引入 webpack
const webpack = require("webpack");
// 合并配置文件
module.exports = webpackMerge(webpackBase,{
plugins:[
// 代码压缩
new webpack.optimize.UglifyJsPlugin({
// 开启 sourceMap
sourceMap: true
}),
// 提取公共 JavaScript 代码
new webpack.optimize.CommonsChunkPlugin({
// chunk 名为 commons
name: "commons",
filename: "[name].bundle.js",
}),
]
});
webpack.config.lint.js
const webpackBase = require("./webpack.config.base");
const webpackMerge = require("webpack-merge");
const config = require("./config");
module.exports = webpackMerge(webpackBase,{
module:{
rules:[
{
test: /\.js$/,
// 强制先进行 ESLint 检查
enforce: "pre",
// 不对 node_modules 和 lib 文件夹中的代码进行检查
exclude: /node_modules|lib/,
loader: "eslint-loader",
options: {
// 启用自动修复
fix:true,
// 启用警告信息
emitWarning:true,
}
},
]
},
devServer:{
contentBase:config.devServerOutputPath,
overlay:{
errors:true,
warnings:true
}
}
});
项目结构
│ .babelrc
│ .eslintrc.js
│ .gitignore
│ package.json
│ postcss.config.js
│ webpack.config.js
│
├─app
│ │ favicon.ico
│ │
│ ├─css
│ │ main.css
│ │
│ ├─html
│ │ index.html
│ │
│ │
│ ├─img
│ │ back.png
│ │
│ ├─js
│ │ ajax.js
│ │ footer.js
│ │ index.js
│ │ nav.js
│ │ public.js
│ │ tity_nav.js
│ │
│ └─lib
│ flexible.js
│ normalize.css
│ swiper.css
│ swiper.js
│
└─config
config.js
webpack.config.base.js
webpack.config.dev.js
webpack.config.lint.js
webpack.config.prod.js
完。
