下面是“vue-cli的webpack模板项目配置文件分析”的完整攻略：
一、什么是vue-cli的webpack模板项目配置文件？
vue-cli是官方提供的Vue.js项目脚手架，通过vue-cli可以快速创建一个基于Vue.js的项目脚手架，而webpack是一种模块化管理工具，可以将多个JavaScript文件打包到一个文件，以便于浏览器加载和解析。vue-cli的webpack模板项目配置文件则是将Vue.js和webpack相结合的配置文件，它可以对项目进行打包、优化等操作。
在vue-cli的webpack模板项目中，配置文件通常分为两种：webpack.base.conf.js和webpack.prod.conf.js。webpack.base.conf.js是webpack的基础配置文件，包含了公共的配置选项，如入口文件、输出路径、模块解析规则等。而webpack.prod.conf.js是webpack的生产环境配置文件，主要包含了针对生产环境的打包、优化等配置。
二、分析vue-cli的webpack模板项目配置文件
1. webpack.base.conf.js
以下是webpack.base.conf.js的代码示例：
const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].js',
publicPath: '/'
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'assets': resolve('src/assets'),
'components': resolve('src/components')
}
},
module: {
rules: [
{
test: /\.vue$/,
use: [{
loader: 'vue-loader',
options: {
loaders: {
sass: ExtractTextPlugin.extract({
use: ['css-loader', 'sass-loader'],
fallback: 'vue-style-loader'
})
}
}
},
{
test: /\.js$/,
use: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: 'img/[name].[hash:7].[ext]'
}
},
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true
}
}
]
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: 'media/[name].[hash:7].[ext]'
}
}
]
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name].[hash:7].[ext]'
}
}
]
}
]
}
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
}),
new ExtractTextPlugin({
filename: 'css/[name].[contenthash].css'
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: 'static',
ignore: ['.*']
}
])
]
}
entry
entry指定了打包入口文件，这里指定的入口文件为./src/main.js。
output
output指定了打包后文件的输出路径和文件名，这里采用了path.resove方法获得当前目录的上一级目录，然后将输出路径设为../dist，将输出文件名设为[name].js，其中[name]会被替换为entry中的键名。publicPath指定了构建好的静态文件在浏览器中访问时的路径前缀，这里设为根路径/。
resolve
resolve配置了模块解析的规则和别名。extensions指定了在引用模块时可以省略的后缀名，这里可以省略.js、.vue和.json后缀。alias则是自定义的模块别名，方便在应用内部引用模块。这里将vue指定为vue/dist/vue.esm.js，@指定为src目录，assets指定为src/assets目录，components指定为src/components目录。
module
module配置了如何处理模块。rules是一个数组，每一项都是一个规则对象。这里定义了对于打包的处理规则。其中，test指定了哪些文件会被打包，这里分为.vue、.js、图片、媒体、字体文件等不同的类型。use是从右到左执行的加载器，vue-loader对.vue文件进行处理，babel-loader对.js文件进行处理，使其兼容大部分浏览器。url-loader对图片、音视频都进行处理，其中对图片进行了base64编码处理。image-webpack-loader对图片进行压缩和优化。
plugins
plugins是插件数组，通过插件可以扩展webpack的功能。这里定义了多个插件，包括提取公共代码、生成html、复制静态资源等。其中，CommonsChunkPlugin插件用于提取公共代码，将第三方库通过CDN的方式引入，以减少打包后的文件大小，加快应用的首屏加载速度。HtmlWebpackPlugin用于生成HTML文件，并将打包后的JavaScript和CSS文件插入到HTML中。CopyWebpackPlugin则用于复制静态资源，如favicon等。
2. webpack.prod.conf.js
以下是webpack.prod.conf.js的代码示例：
const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const webpackConfig = merge(baseWebpackConfig, {
devtool: '#cheap-module-eval-source-map',
module: {
rules: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader',
options: {
minimize: true
}
}, 'postcss-loader', 'sass-loader'],
fallback: 'vue-style-loader'
})
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: false,
parallel: true
}),
new ExtractTextPlugin({
filename: 'css/[name].[contenthash].css'
}),
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true
}
})
]
})
module.exports = webpackConfig
devtool
devtool用于指定开发模式下使用的sourcemap类型，这里指定为#cheap-module-eval-source-map。
module
module同样用于定义模块解析的规则，这里的处理规则与webpack.base.conf.js略有不同，通过ExtractTextPlugin提取CSS文件。
plugins
plugins中定义了多个插件，包括定义环境变量、压缩JavaScript代码和CSS样式、提取CSS等。其中，DefinePlugin插件用于定义环境变量，这里定义了NODE_ENV为production。UglifyJsPlugin用于压缩JavaScript代码，这里配置了压缩选项compress，warnings设为false。ExtractTextPlugin插件用于将CSS样式文件抽取成单独的文件，这里文件名中包含了哈希值，防止浏览器缓存。OptimizeCSSPlugin插件用于压缩CSS样式文件。
三、示例说明
1. 如何修改默认入口文件
在开发过程中，可能需要使用多个入口文件。此时只需要在entry中添加需要的入口文件即可：
module.exports = {
entry: {
'app': './src/app.js',
'home': './src/home.js'
}
// ...
}
以上代码将会生成两个JavaScript文件：app.js和home.js。
2. 如何自定义Webpack的loader
在module中，可以自定义Webpack的loader。例如，我们想要使用stylus语言编写CSS样式文件。首先，我们需要安装stylus-loader：
npm i -D stylus-loader
然后，我们可以在webpack.base.conf.js的module中添加以下规则定义：
// ...
const stylusRule = {
test: /\.styl$/,
use: ['vue-style-loader', 'css-loader', 'postcss-loader', 'stylus-loader']
}
module.exports = {
entry: {
app: './src/main.js'
},
// ...
module: {
rules: [
{
test: /\.vue$/,
// ...
},
{
test: /\.js$/,
// ...
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
// ...
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
// ...
},
stylusRule
]
},
// ...
}
以上代码中，我们将定义了一个名为stylusRule的规则对象，包含了.styl文件的匹配规则和使用的loader列表。在module中添加该规则即可。
四、总结
以上就是vue-cli的webpack模板项目配置文件的分析和示例说明，通过对模板文件的分析，我们可以了解到如何修改默认的入口文件，如何添加自定义loader等。同时，我们也可以深入了解Webpack的各种配置项和插件，以便更好地配置和优化Vue.js项目。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue-cli的webpack模板项目配置文件分析 - Python技术站
微信扫一扫 
支付宝扫一扫 