搭建的一套vue打包方案，方便记录一下
package.json 配置如下：
{ "name": "rise-vue",
"version": "1.0.0",
"description": "rise vue",
"main": "index.js",
"scripts": {
"watch": "webpack --mode development --watch",
"dev": "webpack --mode development",
"build": "webpack --mode production",
"server": "webpack-dev-server --mode development --inline"
},
"author": "Double",
"license": "ISC",
"dependencies": {
"@nutui/nutui": "^2.1.1",
"axios": "^0.18.0",
"fastclick": "^1.0.6",
"mint-ui": "^2.2.13",
"mockjs": "^1.0.1-beta3",
"qs": "^6.7.0",
"vue": "^2.6.10",
"vue-router": "^3.0.2",
"vuex": "^3.1.0"
},
"devDependencies": {
"@babel/core": "^7.4.5",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.4.4",
"@babel/preset-env": "^7.4.5",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^0.28.11",
"cssnano": "^4.1.10",
"file-loader": "^1.1.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"json-loader": "^0.5.7",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.4.5",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-loader": "^2.1.6",
"postcss-safe-parser": "^4.0.1",
"url-loader": "^1.1.2",
"vue-loader": "^15.7.0",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.7.1"
}
}
View Code
webpack.config.js配置如下：
'use strict';const path = require("path"),
webpack = require('webpack'),
{ VueLoaderPlugin } = require("vue-loader"),
MiniCssExtractPlugin = require("mini-css-extract-plugin"),
HtmlWebpackPlugin = require("html-webpack-plugin"),
{ CleanWebpackPlugin } = require("clean-webpack-plugin"),
OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
function resolve (dir) {
return path.resolve(__dirname, dir);
}
// 获取命令参数，命令写在package.json中
let args = process.argv;
// 确定目录
let dist = resolve('dist');
// 获取插件
let plugins = [
// CSS提取 插件
new MiniCssExtractPlugin({
filename: "[name].[chunkhash].css",
chunkFilename: "[id].[chunkhash].css"
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /[0-9a-zA-Z]+\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', {
discardComments: { removeAll: true },
// 避免 cssnano 重新计算 z-index
safe: true,
//cssnano通过移除注释、空白、重复规则、过时的浏览器前缀以及做出其他的优化来工作，一般能减少至少 50% 的大小
//cssnano 集成了autoprefixer的功能。会使用到autoprefixer进行无关前缀的清理。默认不兼容ios8，会去掉部分webkit前缀，比如flex
//所以这里选择关闭，使用postcss的autoprefixer功能
normalizeUnicode: false,
parser: require('postcss-safe-parser'),
autoprefixer: false
}],
},
canPrint: true
}),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'buyOil.html',
title: '选择油站',
chunks: ['buyOil','vendors'],
favicon:"./src/assets/favicon.ico",
inject: true
}),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'buyShop.html',
title: '汽车免费保养',
chunks: ['buyShop','vendors'],
favicon:"./src/assets/favicon.ico",
inject: true
}),
new VueLoaderPlugin(),
new CleanWebpackPlugin()
];
if (!args.includes('--inline')) {
plugins.push(new webpack.IgnorePlugin(/\/mock$/));
}
// webpack 配置
module.exports = {
// 入口文件
entry: {
buyOil: './src/main/buyOil.js',
buyShop: './src/main/buyShop.js',
},
// 输出
output: {
// 输出目录
path: dist,
//publicPath: '', 文件引用前缀
// 输出文件名，[name]与入口文件同名
filename: '[name]-[chunkhash].js'
},
resolve: {
extensions: ['.js','.vue'], // require 文件时可省略后缀 .js .vue
alias: {
'vue': 'vue/dist/vue.js', // 使用完整版的vue
'@': resolve('src'),
'@page': resolve('src/pages')
}
},
module: {
// 加载器配置
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}, {
// 目标文件
test: /\.css$/,
use: [
// 使用这个插件，使得所有less 能被打入一个文件，而不是一个个style
MiniCssExtractPlugin.loader,
'css-loader', 'postcss-loader'
]
}, {
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader','postcss-loader','less-loader'
]
}, {
test: /\.(js)$/,
// 排除目标
exclude: /(node_modules)/,
loader: 'babel-loader',
options: {
babelrc: false,
presets:["@babel/preset-env"],
plugins: [
"@babel/plugin-transform-runtime",
"@babel/plugin-syntax-dynamic-import" // 动态引入文件插件，否则js不能使用import()
]
}
}, {
test: /\.(png|jpg|jpeg|gif|webp|svg)$/,
// 小于 8k的图片，输出为base64 dataurl
loader: 'url-loader?name=assets/images/[name].[hash:8].[ext]&limit=8192'
}, {
test: /\.(ttf|otf|woff|eot)$/,
// 字体转 dataurl
loader: 'url-loader?name=assets/fonts/[name].[hash:8].[ext]&limit=1024'
}, {
test: /\.json$/,
loader: 'json-loader'
}
]
},
optimization: {
// 模块拆分提取规则
splitChunks: {
/* 同时满足以下条件才拆分成单独文件 */
chunks: 'async', // 引用类型，all 表示 initial引用 + async引用
minSize: 30000, // 压缩前体积大于30000B
minChunks: 1, // 引用数量大于 1
maxAsyncRequests: 5, // 异步引用数量小于5
maxInitialRequests: 3, // 初始引用数量小于3
/**********************************/
name: true,
// 缓存组
cacheGroups: {
vendors: {
name: 'vendors',
priority: 10, // 提取到本组的优先级
/* 将符合以下条件的模块提取到组 */
chunks: "all",
test: /node_modules\\/,
minSize: 30000,
minChunks: 1
}
}
}
},
// 额外插件
plugins: plugins,
// 配置 webpack-dev-server
devServer:{
historyApiFallback: true, // 允许路由
inline: true,
port: 8090,
disableHostCheck: true,
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Credentials": true,
"Access-Control-Allow-Methods": "POST, GET, PUT, OPTIONS",
"Access-Control-Allow-Headers": "X-PINGOTHER, Content-Type"
},
},
performance: {
hints: false // 枚举
},
// 对webpack输出信息的配置，可以减少一些不必要的输出
stats: {
children: false
}
};
View Code
以上是 搭建的一套vue打包方案，方便记录一下 的全部内容， 来源链接： utcz.com/z/380524.html
