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

来源：互联网发布：qq三国辅助软件编辑：程序博客网时间：2024/05/29 13:25

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[n] = 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"  ]}

下一章：四.自动化构建

阅读全文

0 0