这次给大家带来Vue模板文件打包配置步奏详解，Vue模板文件打包配置的注意事项有哪些，下面就是实战案例，一起来看一下。
1、github
github地址：https://github.com/MengFangui/VueProjectTemplate
2、webpack配置
（1）基础配置webpack.base.config.js
const path = require('path');
//处理共用、通用的js
const webpack = require('webpack');
//css单独打包
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
//入口文件
entry: {
main: './src/main',
vendors: './src/vendors'
},
output: {
path: path.join(dirname, './dist')
},
module: {
rules: [
//vue单文件处理
{
test: /\.vue$/,
use: [{
loader: 'vue-loader',
options: {
loaders: {
less: ExtractTextPlugin.extract({
//minimize 启用压缩
use: ['css-loader?minimize', 'autoprefixer-loader', 'less-loader'],
fallback: 'vue-style-loader'
}),
css: ExtractTextPlugin.extract({
use: ['css-loader', 'autoprefixer-loader', 'less-loader'],
fallback: 'vue-style-loader'
})
}
}
}]
},
//iview文件夹下的js编译处理
{
test: /iview\/.*?js$/,
loader: 'babel-loader'
},
//js编译处理
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
//css处理
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
//minimize 启用压缩
use: ['css-loader?minimize', 'autoprefixer-loader'],
fallback: 'style-loader'
})
},
//less处理
{
test: /\.less/,
use: ExtractTextPlugin.extract({
use: ['css-loader?minimize', 'autoprefixer-loader', 'less-loader'],
fallback: 'style-loader'
})
},
//图片处理
{
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
loader: 'url-loader?limit=1024'
},
//实现资源复用
{
test: /\.(html|tpl)$/,
loader: 'html-loader'
}
]
},
resolve: {
//自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
extensions: ['.js', '.vue'],
//模块别名定义，方便后续直接引用别名，无须多写长长的地址
alias: {
'vue': 'vue/dist/vue.esm.js'
}
}
};（2）开发环境配置webpack.dev.config.js
//处理共用、通用的js
const webpack = require('webpack');
//处理html模板
const HtmlWebpackPlugin = require('html-webpack-plugin');
//css单独打包
const ExtractTextPlugin = require('extract-text-webpack-plugin');
//合并配置
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.config.js');
//fs模块用于对系统文件及目录进行读写操作
const fs = require('fs');
//编译前用node生成一个env.js的文件，用来标明当前是开发（development）还是生产环境（production）
fs.open('./src/config/env.js', 'w', function(err, fd) {
const buf = 'export default "development";';
fs.write(fd, buf, 0, buf.length, 0, function(err, written, buffer) {});
});
module.exports = merge(webpackBaseConfig, {
//打包代码的同时生成一个sourcemap文件，并在打包文件的末尾添加//# souceURL，注释会告诉JS引擎原始文件位置
devtool: '#source-map',
output: {
//线上环境路径
publicPath: '/dist/',
filename: '[name].js',
chunkFilename: '[name].chunk.js'
},
plugins: [
//css单独打包
new ExtractTextPlugin({
filename: '[name].css',
allChunks: true
}),
//通用模块编译
new webpack.optimize.CommonsChunkPlugin({
//提取的公共块的块名称（chunk）
name: 'vendors',
//生成的通用的文件名
filename: 'vendors.js'
}),
new HtmlWebpackPlugin({
//输出文件
filename: '../index.html',
//模板文件
template: './src/template/index.ejs',
//不插入生成的 js 文件，只是单纯的生成一个 html 文件
inject: false
})
]
});（3）线上环境配置webpack.prod.config.js
//处理共用、通用的js
const webpack = require('webpack');
//处理html模板
const HtmlWebpackPlugin = require('html-webpack-plugin');
//css单独打包
const ExtractTextPlugin = require('extract-text-webpack-plugin');
//合并配置
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.config.js');
//fs模块用于对系统文件及目录进行读写操作
const fs = require('fs');
//编译前用node生成一个env.js的文件，用来标明当前是开发（development）还是生产环境（production）
fs.open('./src/config/env.js', 'w', function (err, fd) {
const buf = 'export default "production";';
fs.write(fd, buf, 0, buf.length, 0, function (err, written, buffer){});
});
module.exports = merge(webpackBaseConfig, {
output: {
//线上环境路径
publicPath: 'dist/',
filename: '[name].[hash].js',
chunkFilename: '[name].[hash].chunk.js'
},
plugins: [
new ExtractTextPlugin({
//css单独打包
filename: '[name].[hash].css',
allChunks: true
}),
//通用模块编译
new webpack.optimize.CommonsChunkPlugin({
//提取的公共块的块名称（chunk）
name: 'vendors',
//生成的通用的文件名
filename: 'vendors.[hash].js'
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
//js压缩
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new HtmlWebpackPlugin({
//输出文件
filename: '../index_prod.html',
//模板文件
template: './src/template/index.ejs',
//不插入生成的 js 文件，只是单纯的生成一个 html 文件
inject: false
})
]
});（4）package.json文件
{
"name": "iview-project",
"version": "2.1.0",
"description": "A base project with Vue.js2、Vue-Router、webpack2 and with iView2.",
"main": "index.js",
"scripts": {
"init": "webpack --progress --config webpack.dev.config.js",
"dev": "webpack-dev-server --content-base ./ --open --inline --hot --compress --history-api-fallback --config webpack.dev.config.js",
"build": "webpack --progress --hide-modules --config webpack.prod.config.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/iview/iview-project.git"
},
"author": "Aresn",
"license": "MIT",
"dependencies": {
"vue": "^2.2.6",
"vue-router": "^2.2.1",
"iview": "^2.0.0-rc.8"
},
"devDependencies": {
"autoprefixer-loader": "^2.0.0",
"babel": "^6.23.0",
"babel-core": "^6.23.1",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.12.0",
"babel-preset-es2015": "^6.9.0",
"babel-runtime": "^6.11.6",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.8.5",
"html-loader": "^0.3.0",
"html-webpack-plugin": "^2.28.0",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue-hot-reload-api": "^1.3.3",
"vue-html-loader": "^1.2.3",
"vue-loader": "^11.0.0",
"vue-style-loader": "^1.0.0",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1",
"webpack-merge": "^3.0.0"
},
"bugs": {
"url": "https://github.com/iview/iview-project/issues"
},
"homepage": "https://www.iviewui.com"
}ps：下面看下如何使用webpack打包vue项目？
1、安装nodejs：使用webpack打包需要用到npm，npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等），所以需要先下载安装nodejs，安装完成后使用npm -v查看是否安装完成；
2、安装cnpm（此步骤为非必须）：因为npm安装插件是从国外的网站上下载的，由于网络影响，很容易就出现异常，cnpm是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。 使用npm install -g cnpm --registry=https://registry.npm.taobao.org安装，之后可以使用cnpm来代替npm；
3、全局安装vue-cli脚手架，npm install -g vue-cli （不加-g安装到当前目录；加-g安装到系统的node目录），安装完成后使用vue -V查看；
4、创建一个基于webpack模板的新项目（下载模板）；使用 vue init webpack my-project(项目文件夹名)；接下来进行一系列的设置后，就下载好了一个vue模板了；
5、cd my-project 进入项目文件夹；使用npm install命令安装package.json文件里的依赖，会根据前端项目的依赖关系下载好相关的组件，存在项目目录的node_modules文件夹下；
6、安装node_modules依赖后，使用命令 npm run dev 启动项目（dev配置在package.json文件中）。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci Vue模板文件打包配置步奏详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Perbezaan antara vue2 dan vue3 pengikatan dua hala
Terdapat beberapa cara untuk meletakkan kedudukan CSS
Apakah perbezaan antara mesin demo dan mesin sebenar?
Apakah perisian sandaran data?
Apakah masalah yang boleh diselesaikan oleh acara js yang menggelegak?
menukar penggunaan arahan
Bagaimana untuk menetapkan status luar talian pada Douyin
Bagaimana untuk menyelesaikan ralat parameter cakera
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
