webpack---webpack构建vue多页面框架（二、webpak.config.js）

来源：互联网发布：zdm cad辅助设计软件编辑：程序博客网时间：2024/06/05 01:18

webpack+vue已经成为单页面程序标配！其实webpack构建vue多页面程序也是相当出色！

工程布局；
webpak.config.js；
生产环境与开发环境；
自动化构建；
源码GitHub；

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兼容配置    ]}

下一章：三. 生产环境与开发环境

阅读全文

0 0