vue+webpack搭建单文件应用和多文件应用webpack.config.js的写法区别

1.前言

这几天&＃xff0c;都遇到过有人问过相似的问题&＃xff0c;就是用vue和webpack搭建目录的时候&＃xff0c;怎么把单页面应用的配置改成多文件应用&＃xff0c;或者是怎么把多文件应用的配置改成单文件应用。这个情况&＃xff0c;我之前有处理过&＃xff0c;公司的同事教过我&＃xff0c;我就针对这个情况写下此篇文章。各位如果觉得我哪里写得不够好&＃xff0c;写错了&＃xff0c;欢迎指出&＃xff0c;大家一起进步。

2.说明

首先&＃xff0c;我用的vue和webpack的版本都是2.x的&＃xff0c;请大家留意自己使用的版本&＃xff0c;特别是webpack的版本&＃xff0c;1和2还是有些区别的。
然后&＃xff0c;项目搭建的流程我不多说了&＃xff0c;之前写过文章&＃xff0c;网上也有很多好文章值得学习。接下来我只针对webpack.config.js这个配置文件说明&＃xff0c;因为我做项目的时候&＃xff0c;改动的基本就是这里&＃xff0c;项目的文件虽然也有写法上的改动&＃xff0c;但是那个改动相信不会难到大家&＃xff0c;如果真的不知如何下手&＃xff0c;我往后可能会再写文章。

3.单文件应用的配置

由于现在单文件应用写得比较多&＃xff0c;一开始我就先放单文件应用的配置文件吧&＃xff0c;代码如下

let path &＃61; require(&＃39;path&＃39;); let webpack &＃61; require(&＃39;webpack&＃39;); /*html-webpack-plugin插件&＃xff0c;webpack中生成HTML的插件&＃xff0c;具体可以去这里查看https://www.npmjs.com/package/html-webpack-plugin*/ let HtmlWebpackPlugin &＃61; require(&＃39;html-webpack-plugin&＃39;); /*一个根据模式匹配获取文件列表的node模块。有关glob的详细用法可以在这里看到——https://github.com/isaacs/node-glob*/ let glob &＃61; require(&＃39;glob&＃39;); /*webpack插件*/ let CommonsChunkPlugin &＃61; webpack.optimize.CommonsChunkPlugin; let UglifyJsPlugin &＃61; webpack.optimize.UglifyJsPlugin; let publicPath &＃61; &＃39;/dist/&＃39;; //IP地址 let serverHost &＃61; getIPAdress(); let config &＃61; {//入口文件entry: {index: path.resolve(__dirname, &＃39;src/js/page/index.js&＃39;),vendors: [&＃39;vue&＃39;, &＃39;vue-router&＃39;,&＃39;vue-resource&＃39;,&＃39;vuex&＃39;,&＃39;element-ui&＃39;,&＃39;element-ui/lib/theme-default/index.css&＃39;] // 需要进行单独打包的文件},//出口文件output: {path: path.join(__dirname, &＃39;dist&＃39;), //输出目录的配置&＃xff0c;模板、样式、脚本、图片等资源的路径配置都相对于它publicPath: publicPath, //模板、样式、脚本、图片等资源对应的server上的路径filename: &＃39;js/[name].js&＃39;, //每个页面对应的主js的生成配置// chunkFilename: &＃39;js/[name].asyncChunk.js?[chunkhash]&＃39; //chunk生成的配置chunkFilename: &＃39;js/[name].asyncChunk.js?&＃39;&＃43;new Date().getTime() //chunk生成的配置},module: {//加载器rules: [{test: /\.vue$/,loader: &＃39;vue-loader&＃39;,options: {loaders: {scss: &＃39;vue-style-loader!css-loader!sass-loader&＃39;, // sass: &＃39;vue-style-loader!css-loader!sass-loader?indentedSyntax&＃39; // }}},{test: /\.html$/,loader: "raw-loader"},{test: /\.css$/,loader: &＃39;style-loader!css-loader&＃39;},{test: /\.js$/,exclude: /node_modules/,loader: "babel-loader",options: {presets: ["es2015","stage-0"],plugins: [&＃39;syntax-dynamic-import&＃39;]}},{test: /\.scss$/,loader: &＃39;style-loader!css-loader!sass-loader&＃39;},{test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,loader: &＃39;file-loader&＃39;},{//图片加载器&＃xff0c;雷同file-loader&＃xff0c;更适合图片&＃xff0c;可以将较小的图片转成base64&＃xff0c;减少http请求//如下配置&＃xff0c;将小于8192byte的图片转成base64码test: /\.(png|jpg|gif)$/,loader: &＃39;url-loader?limit&＃61;8192&name&＃61;images/[hash].[ext]&＃39;}]},//插件plugins: [//生成HTML文件new HtmlWebpackPlugin({filename: path.resolve(__dirname, &＃39;dist/html/index.html&＃39;), //生成的html存放路径&＃xff0c;相对于pathtemplate: path.resolve(__dirname, &＃39;src/html/index.html&＃39;), //ejs模板路径,前面最好加上loader用于处理inject: &＃39;body&＃39;, //js插入的位置&＃xff0c;true/&＃39;head&＃39;/&＃39;body&＃39;/falsechunks: [&＃39;load&＃39;, &＃39;vendors&＃39;, &＃39;vendor1&＃39;, &＃39;vendor2&＃39;, &＃39;index&＃39;],hash: true}),//提取公共模块new CommonsChunkPlugin({name: &＃39;vendors&＃39;, // 将公共模块提取&＃xff0c;生成名为&＃96;vendors&＃96;的chunk//name: [&＃39;vendors&＃39;, &＃39;vendor1&＃39;, &＃39;vendor2&＃39;, &＃39;load&＃39;], // 将公共模块提取&＃xff0c;生成名为&＃96;vendors&＃96;的chunkminChunks: 2, //公共模块被使用的最小次数。配置为2&＃xff0c;也就是同一个模块只有被2个以外的页面同时引用时才会被提取出来作为common chunks// children:true //如果为true,那么公共组件的所有子依赖都将被选择进来}),//在async chunk 里面找到复用 >&＃61; 2次的模块再单独提取出来new CommonsChunkPlugin({async: &＃39;lazy&＃39;,minChunks: (module, count) &＃61;> ( //count 模块被复用的次数count >&＃61; 2)}),new UglifyJsPlugin({ //压缩代码compress: {warnings: false,drop_debugger: true,drop_console: true},except: [&＃39;$super&＃39;, &＃39;$&＃39;, &＃39;exports&＃39;, &＃39;require&＃39;, &＃39;define&＃39;, &＃39;module&＃39;] //排除关键字})],//使用webpack-dev-serverdevServer: {contentBase: path.join(__dirname, "/"),host: serverHost,port: 9090, //默认9090inline: true, //可以监控js变化hot: true//热启动},resolve: {alias: {vue: &＃39;vue/dist/vue.js&＃39;},extensions:[&＃39;.js&＃39;,&＃39;.scss&＃39;,&＃39;.vue&＃39;,&＃39;.json&＃39;]// 可以不加后缀, 直接使用 import xx from &＃39;xx&＃39; 的语法} }; module.exports &＃61; config; /*** &＃64;description 获取本地IP地址* &＃64;returns {string|*}*/ function getIPAdress() {let interfaces &＃61; require(&＃39;os&＃39;).networkInterfaces();for (let devName in interfaces) {let iface &＃61; interfaces[devName];for (let i &＃61; 0; i }

4.多文件应用的配置

多文件现在用的不算很多&＃xff0c;主要有时候会负责公司一些活动的小项目会用到&＃xff0c;代码如下。

let path &＃61; require(&＃39;path&＃39;); let webpack &＃61; require(&＃39;webpack&＃39;); /*html-webpack-plugin插件&＃xff0c;webpack中生成HTML的插件&＃xff0c;具体可以去这里查看https://www.npmjs.com/package/html-webpack-plugin*/ let HtmlWebpackPlugin &＃61; require(&＃39;html-webpack-plugin&＃39;); /*一个根据模式匹配获取文件列表的node模块。有关glob的详细用法可以在这里看到——https://github.com/isaacs/node-glob*/ let glob &＃61; require(&＃39;glob&＃39;); /*webpack插件*/ let CommonsChunkPlugin &＃61; webpack.optimize.CommonsChunkPlugin; let UglifyJsPlugin &＃61; webpack.optimize.UglifyJsPlugin; let publicPath &＃61; &＃39;/dist/&＃39;; //通过getEntry函数获取所有js脚本 let jsEntries &＃61; getEntry(&＃39;./src/js/page/*.js&＃39;); //IP地址 let IPAddress &＃61; getIPAdress(); let serverHost &＃61; IPAddress; let config &＃61; {//入口文件entry: jsEntries,// entry: {// index:jsEntries,// vendors: [&＃39;vue&＃39;, &＃39;vue-router&＃39;,&＃39;vue-resource&＃39;] // 需要进行单独打包的文件// },//出口文件output: {path: path.join(__dirname, &＃39;dist&＃39;), //输出目录的配置&＃xff0c;模板、样式、脚本、图片等资源的路径配置都相对于它publicPath: publicPath, //模板、样式、脚本、图片等资源对应的server上的路径filename: &＃39;js/[name].js&＃39;, //每个页面对应的主js的生成配置chunkFilename: &＃39;js/[id].chunk.js?[chunkhash]&＃39; //chunk生成的配置},module: {rules: [{test: /\.vue$/,loader: &＃39;vue-loader&＃39;,options: {loaders: {scss: &＃39;vue-style-loader!css-loader!sass-loader&＃39;, // sass: &＃39;vue-style-loader!css-loader!sass-loader?indentedSyntax&＃39; // }}},{test: /\.html$/,loader: "raw-loader"},{test: /\.css$/,loader: &＃39;style-loader!css-loader&＃39;},{test: /\.js$/,exclude: /node_modules/,loader: "babel-loader",options: {presets: ["es2015","stage-0"],plugins: [&＃39;syntax-dynamic-import&＃39;]}},{test: /\.scss$/,loader: &＃39;style-loader!css-loader!sass-loader&＃39;},{test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,loader: &＃39;file-loader&＃39;},{//图片加载器&＃xff0c;雷同file-loader&＃xff0c;更适合图片&＃xff0c;可以将较小的图片转成base64&＃xff0c;减少http请求//如下配置&＃xff0c;将小于8192byte的图片转成base64码test: /\.(png|jpg|gif)$/,loader: &＃39;url-loader?limit&＃61;8192&name&＃61;images/[hash].[ext]&＃39;}]},plugins: [new CommonsChunkPlugin({name: &＃39;vendors&＃39;, // 将公共模块提取&＃xff0c;生成名为&＃96;vendors&＃96;的chunk//name: [&＃39;vendors&＃39;, &＃39;vendor1&＃39;, &＃39;vendor2&＃39;, &＃39;load&＃39;], // 将公共模块提取&＃xff0c;生成名为&＃96;vendors&＃96;的chunkminChunks: 2, //公共模块被使用的最小次数。配置为2&＃xff0c;也就是同一个模块只有被2个以外的页面同时引用时才会被提取出来作为common chunks// children:true //如果为true,那么公共组件的所有子依赖都将被选择进来})new UglifyJsPlugin({ //压缩代码compress: {warnings: false,drop_debugger: true,drop_console: true},except: [&＃39;$super&＃39;, &＃39;$&＃39;, &＃39;exports&＃39;, &＃39;require&＃39;, &＃39;define&＃39;, &＃39;module&＃39;] //排除关键字})],//使用webpack-dev-serverdevServer: {contentBase: path.join(__dirname, "/"),host: serverHost,port: 9090, //默认9090inline: true, //可以监控js变化hot: true//热启动},resolve: {alias: {vue: &＃39;vue/dist/vue.js&＃39;},extensions:[&＃39;.js&＃39;,&＃39;.scss&＃39;,&＃39;.vue&＃39;,&＃39;.json&＃39;]// 可以不加后缀, 直接使用 import xx from &＃39;xx&＃39; 的语法} }; //获取目录下的所有.html文件的名称 let tplPages &＃61; Object.keys(getEntry(&＃39;./src/html/*.html&＃39;)); tplPages.forEach((pathname)&＃61;> {let conf &＃61; {filename: path.resolve(__dirname, &＃39;dist/html/&＃39;&＃43; pathname &＃43;&＃39;.html&＃39;), //生成的html存放路径&＃xff0c;相对于pathtemplate: path.resolve(__dirname, &＃39;src/html/&＃39;&＃43; pathname &＃43;&＃39;.html&＃39;), //ejs模板路径,前面最好加上loader用于处理inject: &＃39;body&＃39;, //js插入的位置&＃xff0c;true/&＃39;head&＃39;/&＃39;body&＃39;/falsechunks: [&＃39;load&＃39;, &＃39;vendors&＃39;, &＃39;vendor1&＃39;, &＃39;vendor2&＃39;, &＃39;index&＃39;],hash: true}; //如果文件名和入口文件名所对应的js有匹配(如&＃xff1a;index.html和index.js就是相匹配的,就往index.html里面插入index.js&＃xff1b;share.html和share.js就是相匹配的,就往share.html里面插入share.js)if (pathname in config.entry) {conf.inject &＃61; &＃39;body&＃39;;conf.chunks &＃61; [&＃39;vendors&＃39;, pathname];conf.hash &＃61; true;} //生成配置压栈config.plugins.push(new HtmlWebpackPlugin(conf)); }); module.exports &＃61; config;/*** &＃64;description 获取本地IP地址* &＃64;returns {string|*}*/ function getIPAdress() {let interfaces &＃61; require(&＃39;os&＃39;).networkInterfaces();for (let devName in interfaces) {let iface &＃61; interfaces[devName];for (let i &＃61; 0; i } function getEntry(globPath) {//获取globPath路径下的所有文件let files &＃61; glob.sync(globPath);let entries &＃61; {},entry, dirname, basename, pathname, extname;//循环for (let i &＃61; 0; i quux*/basename &＃61; path.basename(entry, extname);pathname &＃61; path.join(dirname, basename);//路径合并entries[basename] &＃61; entry;}//返回map&＃61;>{fileName:fileUrl}return entries; }

5.区别总结

一对比&＃xff0c;区别就是出来了&＃xff0c;但是写法是大同小异的。有区别是主要是下面几点

1.入口文件的区别&＃xff0c;单页面应用入口文件是就是一个index.js&＃xff08;&＃39;src/js/page/index.js&＃39;&＃xff09;。而多页面应用的入口文件是所有需要用到的页面let jsEntries &＃61; getEntry(&＃39;./src/js/page/*.js&＃39;);。&＃xff08;getEntry方法是返回一个目录下所有的.js文件的名称和路径&＃xff0c;jsEntries就是一个对象数组&＃xff0c;里面包含着./src/js/page目录下所有的.js文件的名称和路径&＃xff09;

2.在多文件应用的配置中&＃xff0c;HtmlWebpackPlugin这个插件是提取出来&＃xff0c;在遍历getEntry(&＃39;./src/html/*.html&＃39;)的过程中&＃xff0c;执行一次就往配置(config.plugins)那里push一次&＃xff08;config.plugins.push(new HtmlWebpackPlugin(conf))&＃xff09;。为什么这样写&＃xff0c;大家应该很清楚了&＃xff0c;有多少个入口文件&＃xff0c;就得写多少次这个插件&＃xff0c;new HtmlWebpackPlugin多少次&＃xff0c;如果入口文件只有一两个&＃xff0c;两三个还好&＃xff0c;如果有100个入口文件&＃xff0c;岂不是要在config.plugins那里写100次new HtmlWebpackPlugin&＃xff0c;所以就标题文字遍历了&＃xff0c;方便点。