加拿大28

  • <tr id='spt0r'><strong id='spt0r'></strong><small id='spt0r'></small><button id='spt0r'></button><li id='spt0r'><noscript id='spt0r'><big id='spt0r'></big><dt id='spt0r'></dt></noscript></li></tr><ol id='spt0r'><option id='spt0r'><table id='spt0r'><blockquote id='spt0r'><tbody id='spt0r'></tbody></blockquote></table></option></ol><u id='spt0r'></u><kbd id='spt0r'><kbd id='spt0r'></kbd></kbd>

    <code id='spt0r'><strong id='spt0r'></strong></code>

    <fieldset id='spt0r'></fieldset>
          <span id='spt0r'></span>

              <ins id='spt0r'></ins>
              <acronym id='spt0r'><em id='spt0r'></em><td id='spt0r'><div id='spt0r'></div></td></acronym><address id='spt0r'><big id='spt0r'><big id='spt0r'></big><legend id='spt0r'></legend></big></address>

              <i id='spt0r'><div id='spt0r'><ins id='spt0r'></ins></div></i>
              <i id='spt0r'></i>
            1. <dl id='spt0r'></dl>
              1. ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
                当前位置:首页 >> 网页制作 >> web前端 >> webpack集成bootstrap进行多页面开发

                webpack集成bootstrap进行多页面开发

                来源:网络整理     时间:2016-02-02     关键词:

                本篇文章主要介绍了"webpack集成bootstrap进行多页面开发",主要涉及到方面的内容,对于web前端感兴趣的同学可以参考一下: webpack还是很有搞头的,再搞搞gulp都不用了。。。最近以jquery、bootstrap为例,搞了个多页面,多入口开发结构,mark一下。开发人员主要集...

                webpack还是很有搞头的,再搞搞gulp都不用了。。。

                最近以jquery、bootstrap为例,搞了个多页面,多入口开发结构,mark一下。
                webpack集成bootstrap进行多页面开发

                开发人员主要集中在以上三个目录,整理js/css/img/page

                最终通过webpack打包到dist目录,打出目录结构


                webpack集成bootstrap进行多页面开发

                因为使用extract-text-webpack-plugin插件,提取css文件名,这个坑爹有点,后续通过改造这个插件,可以单独打出来css文件夹,实践过,又忘了。。。。

                ok,上webpack.config.js

                var path = require('path');
                
                var glob = require('glob');
                
                var webpack = require('webpack');
                
                var ExtractTextPlugin = require("extract-text-webpack-plugin");
                
                var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
                
                // CSS浏览器前缀问题
                var autoprefixer = require('autoprefixer');
                var precss = require('precss');
                
                // 多入口文件
                function getEntrys() {
                
                	var entrys = {};
                
                	var src = new RegExp(__dirname.replace(/\\/g, "/") + "/src/");
                
                	glob.sync(__dirname + '/src/js/**/*.js').forEach(function(name) {
                
                		// 前缀
                		var entry = name.replace(src, "");
                
                		// 后缀
                		entry = entry.replace(/\.js$/, "");
                
                		entrys[entry] = name;
                
                	});
                
                	return entrys;
                };
                
                module.exports = {
                	context : __dirname + '/src',
                	entry : getEntrys(),
                	output : {
                		path : path.resolve(__dirname, './dist'),
                		publicPath : '/dist/',
                		filename : '[name].js'
                	},
                	resolveLoader : {
                		root : path.join(__dirname, 'node_modules')
                	},
                	resolve : {
                		root : path.join(__dirname, 'node_modules'),
                		extensions : [ '', '.js' ],
                		alias : {}
                	},
                	plugins : [
                	// 全局依赖jQuery
                	new webpack.ProvidePlugin({
                		$ : "jquery",
                		jQuery : "jquery",
                		"window.jQuery" : "jquery"
                	}),
                	// 提取依赖的jQuery通用插件
                	new CommonsChunkPlugin({
                		name : "js/vendor",
                		minChunks : Infinity
                	}),
                	// 提取CSS文件
                	new ExtractTextPlugin("[name].css"),
                	// 查找相等或近似的模块,避免在最终生成的文件中出现重复的模块
                	new webpack.optimize.DedupePlugin() ],
                	module : {
                		loaders : [
                				{
                					test : /\.js$/,
                					loader : 'babel',
                					exclude : /node_modules/
                				},
                				{
                					test : /\.jsx$/,
                					loader : 'babel',
                					exclude : /node_modules/
                				},
                				{
                					test : /\.json$/,
                					loader : 'json'
                				},
                				{
                					test : /\.(png|jpg|gif)$/,
                					loader : 'url',
                					query : {
                						limit : 10000,
                						// CSS图片目录
                						name : '[path][name]_[hash].[ext]'
                					}
                				},
                				{
                					test : /\.less$/,
                					loader : ExtractTextPlugin.extract("style-loader",
                							"css-loader!postcss-loader")
                				},
                				{
                					test : /\.css$/,
                					loader : 'style!css',
                					loader : ExtractTextPlugin.extract("style-loader",
                							"css-loader!postcss-loader")
                				}, {// bootstrap font-awesome
                					test : /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
                					loader : 'url',
                					query : {
                						limit : 10000,
                						mimetype : 'application/font-woff',
                						// 字体文件放置目录
                						name : 'font/bootstrap/[name]_[hash].[ext]'
                					}
                				}, {// bootstrap
                					test : /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                					loader : 'url',
                					query : {
                						limit : 10000,
                						mimetype : 'application/octet-stream',
                						// 字体文件放置目录
                						name : 'font/bootstrap/[name]_[hash].[ext]'
                					}
                				}, {// bootstrap
                					test : /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                					loader : 'file',
                					query : {
                						limit : 10000,
                						// 字体文件放置目录
                						name : 'font/bootstrap/[name]_[hash].[ext]'
                					}
                				}, {// bootstrap
                					test : /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                					loader : 'url',
                					query : {
                						limit : 10000,
                						mimetype : 'application/image/svg+xml',
                						// 字体文件放置目录
                						name : 'font/bootstrap/[name]_[hash].[ext]'
                					}
                				}, {// font-awesome
                					test : /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                					loader : "file",
                					query : {
                						limit : 10000,
                						// 字体文件放置目录
                						name : 'font/bootstrap/[name]_[hash].[ext]'
                					}
                				}, {// 如果要加载jQuery插件,解析路径&参数
                					test : "/lib/jquery/**/*.js$",
                					loader : "'imports?jQuery=jquery,$=jquery,this=>window"
                				} ]
                	},
                	postcss : function() {
                		return [ autoprefixer({
                			browsers : [ 'not ie <= 8' ]
                		}), precss ];
                	},
                	devServer : {
                		historyApiFallback : true,
                		noInfo : true,
                		// 其实很简单的,只要配置这个参数就可以了
                		proxy : {
                			'/v1/*' : {
                				target : 'http://localhost:3000/',
                				secure : false
                			}
                		}
                	},
                	devtool : 'eval-source-map'
                }
                
                if (process.env.NODE_ENV === 'production') {
                	module.exports.devtool = 'source-map'
                	// http://vuejs.github.io/vue-loader/workflow/production.html
                	module.exports.plugins = (module.exports.plugins || []).concat([
                			new webpack.DefinePlugin({
                				'process.env' : {
                					NODE_ENV : '"production"'
                				}
                			}), new webpack.optimize.UglifyJsPlugin({
                				compress : {
                					warnings : false
                				}
                			}), new webpack.optimize.OccurenceOrderPlugin() ])
                }
                

                 关于vendor.js、bootstrap.js的内容,以往记录过,就是个集合而已package.json也有,额外加了glob依赖。

                现在面临如下几个问题:

                1.css文件打包到dist目录没有形成单独的文件夹,受限于css提取插件,可改造实现

                2.现在只有bootstrap、font-awesome字体文件,放到bootstrap文件夹了,其他字体文件呢,其实缺乏识别bootstrap、font-awesome的有效标识

                3.dist目录下,除了js、css文件,其他文件都有hash值,还缺乏最后一步,将js、css文件hash处理,然后替换掉pages目录下的页面引用,这一步可以考虑gulp实现,在开发阶段,是不能直接hash js、css文件的,做了hash开发人员怎么办。。。

                以上就介绍了webpack集成bootstrap进行多页面开发,包括了方面的内容,希望对web前端有兴趣的朋友有所帮助。

                本文网址链接:http://bayitaku.com/article/detail_313548.html

                相关图片

                相关文章