webpack---webpack构建vue多页面框架(三、生产环境与开发环境)
2017-08-15 20:54
826 查看
webpack+vue已经成为单页面程序标配!其实webpack构建vue多页面程序也是相当出色!
工程布局;
webpak.config.js;
生产环境与开发环境;
自动化构建;
源码GitHub
3.生产环境与开发环境
package.json
下一章:四.自动化构建
工程布局;
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" ] }
下一章:四.自动化构建
相关文章推荐
- webpack---webpack构建vue多页面框架(二、webpak.config.js)
- 【WEB开发】webpack+vue构建前端开发环境
- webpack-dev-server+vue构建开发环境(一)
- webpack---使用插件,常见webpack的plugin,构建vue,react单页面/多页面工程APP必备插件
- webpack---webpack构建vue多页面框架(一、工程布局)
- webpack---webpack构建vue多页面框架(四、自动化构建)
- vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址
- vue前端开发项目框架搭建(node+webpack+vue)
- VUE 利用webpack 给生产环境和发布环境配置不同的接口地址
- 使用dvajs+webpack构建react开发环境
- Window10 下部署Webpack+Vuejs构建前端环境(1)
- Vue.js结合webpack开发时,webpack环境的搭建
- webpack配置开发环境(html-webpack-plugin、css-loader、less-loader、babel-loader)
- 详解基于webpack和vue.js搭建开发环境
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载
- webpack开发和生产两个环境的配置详解
- 基于webpack和vue.js搭建开发环境
- webpack学习笔记-7-开发环境和生产环境
- webpack开发环境和生产环境的深入理解
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址