您的位置:首页 > 产品设计 > UI/UE

webpack---webpack构建vue多页面框架(三、生产环境与开发环境)

2017-08-15 20:54 826 查看
webpack+vue已经成为单页面程序标配!其实webpack构建vue多页面程序也是相当出色!

工程布局

webpak.config.js

生产环境与开发环境

自动化构建

源码GitHub

3.生产环境与开发环境

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');  //开发环境下打开默认浏览器
const progressbarWebpack = require('progress-bar-webpack-plugin');

const prod = process.env.NODE_ENV === 'production' ? true : false;  //确认生产环境变量

let hostName = "127.0.0.1";
let devPort = "8088";

module.exports = {
entry: {
home:'./src/APPpages/home/*.js',
list:'./src/APPpages/list/*.js',
about:'./src/APPpages/about/*.js',
},
output: {
path: resolve('./dist'),
publicPath: prod ? '../' : '/dist/', //区别开发与生产环境,设置不同路径
filename: 'js/[name].js',
chunkFilename: 'js/common/[id].chunk.js'
},
resolve: {
alias: {
'vue': 'vue/dist/vue.js',
'common':resolve('./src/APPcommon')
}
},

module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
transformToRequire: {
video: 'src',
source: 'src',
img: 'src',
image: 'xlink:href'
}
}
},
{
test: /\.html$/,
loader: 'html-loader?attrs=img:src img:data-src'
},
{
test: /\.js$/,
loader: 'babel-loader',
enforce: 'pre',
include: resolve('src'),
exclude: ['node_modules/'],
query: {
presets: ['latest']
}
},
{
test: /\.scss$/,
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]',
}
},
{
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'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors',//公共模块提取,名为vendors的js
minChunks: Infinity,
chunks: ['home', 'list', 'about'],//提取哪些模块共有的部分
minChunks: pageNameList.length,//至少三个模块共有部分,才会进行提取

}),
new ExtractTextPlugin({
filename: 'css/[name].css',
allChunks: true,

}),
new OpenBrowserPlugin({
url: 'http://' + hostName + ':' + devPort + '/dist/views/test.html',  //测试页面选择test.html,可以自己更改
}),
new webpack.HotModuleReplacementPlugin(), //开发环境下热更新
new progressbarWebpack(),

//打包html配置
new HtmlWebpackPlugin({
filename: 'views/home.html',//打包home页生成home.html
template: './src/APPcommon/view/index.html', //模板文件
inject: 'body',  //js放在body底部
chunks: ['vendors', 'home'], //引入公用vendors.js与home.js
minify: {
//html压缩配置
removeAttributeQuotes: true,
collapseWhitespace: true
}
}),
new HtmlWebpackPlugin({
filename: 'views/list.html',//打包list页生成home.html
template: './src/APPcommon/view/index.html', //模板文件
inject: 'body',  //js放在body底部
chunks: ['vendors', 'list'], //引入公用vendors.js与list.js
minify: {
//html压缩配置
removeAttributeQuotes: true,
collapseWhitespace: true
}
}),
new HtmlWebpackPlugin({
filename: 'views/about.html',//打包about页生成about.html
template: './src/APPcommon/view/index.html', //模板文件
inject: 'body',  //js放在body底部
chunks: ['vendors', 'about'], //引入公用vendors.js与about.js
minify: {
//html压缩配置
removeAttributeQuotes: true,
collapseWhitespace: true
}
}),
],

//开发环境,常用配置
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: devPort,
host: hostName,
inline: true,
hot: true,
noInfo: true,
historyApiFallback: true,
},
performance: {
hints: false
},
};

module.exports.plugins = (module.exports.plugins || []).concat(proHtmlPlugin);

if (prod) {
module.exports.devtool = '#source-map'
module.exports.plugins = (module.exports.plugins || []).concat([
new CleanWebpackPlugin('./dist'),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
};

function resolve(dir) {
return path.join(__dirname, dir)
}

function getEntry() {
var entry = {};
//读取开发目录,并进行路径裁剪
glob.sync('./src/APPpages/**/*.js')
.forEach(function (name) {
var start = name.indexOf('src/') + 4,
end = name.length - 3;
var eArr = [];
var n = name.slice(start, end);
n = n.slice(0, n.lastIndexOf('/')); //保存各个组件的入口
n = n.split('/')[1];
eArr.push(name);
entry
= eArr;
});
return entry;
};

function getHtmlPlugin(name) {
return (new HtmlWebpackPlugin({
// favicon: resolve('../src/APPcommon/img/fav.png'),
filename: 'views/' + name + '.html',
template: './src/APPcommon/view/index.html',
inject: 'body',
chunks: ['vendors', name],
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true
}
})
)
}


package.json

{
"name": "vue-app",
"version": "1.0.0",
"description": "webpack to build the multiple pages of vue",
"main": "index.js",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"author": "wbiokr",
"license": "ISC",
"dependencies": {
"axios": "^0.16.2",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-latest": "^6.24.1",
"clean-webpack-plugin": "^0.1.16",
"cross-env": "^3.0.0",
"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"html-loader": "^0.5.0",
"html-webpack-plugin": "^2.30.1",
"mint-ui": "^2.2.9",
"node-sass": "^4.5.3",
"open-browser-webpack-plugin": "^0.0.5",
"postcss-loader": "^2.0.6",
"progress-bar-webpack-plugin": "^1.10.0",
"sass-loader": "^6.0.6",
"serve": "^6.0.5",
"source-map-loader": "^0.2.1",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"vue": "^2.4.2",
"vue-loader": "^13.0.2",
"vue-template-compiler": "^2.4.2",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}


下一章:四.自动化构建
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息