webpack+vue已经成为单页面程序标配!其实webpack构建vue多页面程序也是相当出色!
2.webpak.config.js
webpak.config.js基本配置如下:
const webpack=require('webpack'); //webpack必要条件
const ExtractTextPlugin=require('extract-text-webpack-plugin'); //分离css插件
const HtmlWebpackPlugin=require('html-webpack-plugin'); //多页面生成视图插件
const CleanWebpackPlugin=require('clean-webpack-plugin'); //清除工程目录插件
const ProgressBarPlugin=require('progress-bar-webpack-plugin'); //打包进度条插件
const path=require('path'); //node路径处理模块
module.exports={
//对象形式entry
entry:{
home:resolve('./src/APPpages/home/main.js'),
list:resolve('./src/APPpages/list/main.js'),
about:resolve('./src/APPpages/about/main.js'),
},
output:{
path:resolve('./dist'), //打包之后工程根目录
publicPath:'../', //js,css,img等资源对应的server目录
filename:'js/[name].js', //每个页面对应的js文件
chunkFilename:'js/common/[id].chunk.js' //按需加载js
},
resolve:{
alias:{
vue:'vue/dist/vue.js',
common:resolve('./src/APPcommon') //为公共目录设置别名
}
},
module: {
rules: [
{
test: /\.vue$/, //.vue文件处理
loader: 'vue-loader',
options: {
transformToRequire: {
video: 'src',
source: 'src',
img: 'src',
image: 'xlink:href'
}
}
},
{
test: /\.html$/, //html打包,可有可无
loader: 'html-loader?attrs=img:src img:data-src'
},
{
test: /\.js$/, //es6转es5处理
loader: 'babel-loader',
enforce: 'pre',
include: resolve('src'),
exclude: ['node_modules/'],
query: {
presets: ['latest']
}
},
{
test: /\.scss$/, //sass预编译解析,并分离css
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader','postcss-loader', 'sass-loader']
})
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader','postcss-loader']
})
},
{
test: /\.(png|jpeg|jpg|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 5000,
name: './img/[name].[ext]', //图片保存到img文件夹
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: '/YDW_res/media/[name].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: '/YDW_res/fonts/[name].[ext]'
}
}
]
},
plugins: [
new webpack.ProvidePlugin({
$:'jquery' //jq注入,按需使用
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors',//公共模块提取,什么名为vendors的js
minChunks: Infinity,
chunks: ['home', 'list', 'about'],//提取哪些模块共有的部分
minChunks: pageNameList.length,//至少三个模块共有部分,才会进行提取
}),
new ExtractTextPlugin({
filename: 'css/[name].css', //每个页面css
allChunks: true,
}),
new progressbarWebpack(), //进度条
new CleanWebpackPlugin('./dist'), //构建dist之前清除老版目录
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
],
}
//生成绝对路径
function resolve(dir) {
return path.join(__dirname, dir)
}
postcss.config.js
module.exports={
plugins:[
require('autoprefixer') //css3兼容配置
]
}
下一章:三. 生产环境与开发环境