webpack集成bootstrap进行多页面开发
来源:互联网 发布:爱腾网络延长器接法图 编辑:程序博客网 时间:2024/06/11 16:32
这篇文章已经过时了,有兴趣的可以看看github上示例工程,其基本思想还是一致的:
https://github.com/luqingxuan/JqueryPagesExample
webpack还是很有搞头的,再搞搞gulp都不用了。。。
最近以jquery、bootstrap为例,搞了个多页面,多入口开发结构,mark一下。
开发人员主要集中在以上三个目录,整理js/css/img/page
最终通过webpack打包到dist目录,打出目录结构
因为使用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 : [// 全局依赖jQuerynew 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-awesometest : /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,loader : 'url',query : {limit : 10000,mimetype : 'application/font-woff',// 字体文件放置目录name : 'font/bootstrap/[name]_[hash].[ext]'}}, {// bootstraptest : /\.ttf(\?v=\d+\.\d+\.\d+)?$/,loader : 'url',query : {limit : 10000,mimetype : 'application/octet-stream',// 字体文件放置目录name : 'font/bootstrap/[name]_[hash].[ext]'}}, {// bootstraptest : /\.eot(\?v=\d+\.\d+\.\d+)?$/,loader : 'file',query : {limit : 10000,// 字体文件放置目录name : 'font/bootstrap/[name]_[hash].[ext]'}}, {// bootstraptest : /\.svg(\?v=\d+\.\d+\.\d+)?$/,loader : 'url',query : {limit : 10000,mimetype : 'application/image/svg+xml',// 字体文件放置目录name : 'font/bootstrap/[name]_[hash].[ext]'}}, {// font-awesometest : /\.(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.htmlmodule.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开发人员怎么办。。。
阅读全文
0 0
- webpack集成bootstrap进行多页面开发
- webpack+vue 实现多页面开发
- 【webpack】使用webpack进行ES6开发
- 使用webpack 进行ES6开发
- webpack 多页面模版
- react-webpack-express实现多页面 — node.js开发
- webpack---webpack构建vue多页面框架(三、生产环境与开发环境)
- java web页面使用bootstrap框架进行开发之引用样式
- bootstrap 微信开发页面
- WEB开发----BootStrap美化页面
- 使用 Webpack 和 ES6 进行 React 开发
- 基于打包工具Webpack进行项目开发
- 使用webpack 构建handlebars+jquery+bootstrap的开发环境
- 使用bootstrap进行页面设计第一步
- webpack封装bootstrap
- 初学Angular+webpack+bootstrap
- vue+webpack+bootstrap使用
- 利用 Bootstrap 进行快速 Web开发
- overpass language 笔记
- spring动态数据源和事务配合的调研
- 20170516@Map集合遍历方式
- swift 与JS交互( JS调用swift方法)
- 遍历链表 构造并升序输出(解题报告)
- webpack集成bootstrap进行多页面开发
- 《Objective-C基础教程(第2版)》pdf
- 我的第一个Unity3d项目-超级玛丽
- 请写出下列表达式的值,并编写程序验证。
- ##顺序表 编码##
- django 快速搭建blog
- 最大流问题的Ford-Fulkerson解法
- 用list_to_tree在ThinkPHP上制作一个简单的菜单功能
- 穿过已知点画平滑曲线(3次贝塞尔曲线)