webpack2打包vue与Boostrap并进行多页面打包以及公共js部分的提取

62 阅读 0 评论 41 点赞

我是靠谱客的博主迷你汽车，最近开发中收集的这篇文章主要介绍webpack2打包vue与Boostrap并进行多页面打包以及公共js部分的提取，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

webpack介绍

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

从这个介绍中可以看出webpack提供的是一种模块化管理工具，工具是死的用的人是活的，所以怎么用webpack还是要看每个人的想法，通过对前端技术的开发的经验来看我们在前端编码过程中遇到的比较多的模块就是css、js、html、img以及这些文件组合所产生的插件比如

jQuery、echart、d3.js等就是一个纯js插件只需要引入js文件就可以调用API实现相关功能
animate.css，Normalize.css就是一个纯css的模块
bootstrap则是三个模块的组合字体图标文件，css文件以及js文件

通过对这些使用比较广泛的插件的使用和研究我们在设计自己的公共模块时也可以借鉴下，在平时的前端页面开发过程中我们能总结出前端代码分为两部分，一部分是调用的第三方插件（js，css，图片等），这部分代码我们是不需要去做改动的，一部分就是自己写的代码，这部分的代码就是我们的自由发挥空间；因此我们在使用webpack进行项目搭建时需要对这两部分的资源进行组织和规范，

对于第三方插件部分配置好路径，在引入模块的时候注意下（后面会详细介绍）
对于自己写的这部分代码进行模块化组织时需要考虑到js，css，html的公共模块复用

webpack2配置文件

接下来我们开始webpack2的webpack.config.js配置文件的介绍（只介绍几个常用的属性更多的介绍请查看webpack配置文件）

module.exports = {
devtool: 'source-map',
// entry数据类型(string|object|array)
entry:{
common:['jQuery','bootstrap','vue'],
app:path.resolve(__dirname, '../src/views/index/index.js'),
test:path.resolve(__dirname, '../src/views/test/index.js')
} ,
output: { //打包路径
publicPath: "/assets/", //配合devServer本地Server
filename: 'js/[name].bundle.js?v=[hash]', //出口文件名
path: path.resolve(__dirname, '../dist/'), //打包路径
},
resolve: {
//设置可省略文件后缀名(注:如果有文件没有后缀设置‘’会在编译时会报错,必须改成' '中间加个空格。ps:虽然看起来很强大但有时候省略后缀真不知道加载是啥啊~);
extensions: [' ','.css','.less','.js','.json','.vue'],
//查找module的话从这里开始查找;
modules: [path.resolve(__dirname, "src"), "node_modules"], //绝对路径;
//别名设置,在模块加载时可以少写点路
alias: {
"components":path.resolve(__dirname,'../src/components'),
"assets":path.resolve(__dirname,'../src/assets'),
"lib":path.resolve(__dirname,'../src/lib'),
}
},
//插件部分，html，css部分的打包配置
plugins:[
new HtmlWebpackPlugin({
filename: 'index.html', //设置最后生成文件名称;
//设置原文件模块,ejs是webpack内置的加载器不需要安装(安装也没问题)
template: path.resolve(__dirname,'../src/views/index/index.ejs')
}),
new HtmlWebpackPlugin({
filename: 'index.html', //设置最后生成文件名称;
//设置原文件模块,ejs是webpack内置的加载器不需要安装(安装也没问题)
template: path.resolve(__dirname,'../src/views/test/index.html') ,
chunks:
}),
],
module:{
rules:[
{
//正则匹配后缀.js文件;
test: /.js$/,
//需要排除的目录

exclude: /node_modules/,
//加载babel-loader转译es6
use: [{
loader: 'babel-loader',
//配置参数,wecpack2后loader的参数都在这里配置
options: {
presets: ['es2015']
}
}],
},
//更多的loader配置请关注github上面的源码...
]
}
}

webpack加载包

webpack的强大之处在于丰富的loader模块以及插件部分同时也为我们预留了自定义loader的接口以及plugin接口让我们可以按自己的要求来加载组织和处理特定的模块

下面介绍下我们在开发过程中经常会用到的loader模块加载器以及前端代码处理插件

//es6语法插件
npm install babel-core babel-loader babel-preset-es2015 --save-dev
//样式提取压缩
npm install cssnano extract-text-webpack-plugin optimize-css-assets-webpack-plugin --save-dev
//样式模块加载器(自动添加前缀)
npm install style-loader css-loader less-loader less postcss-loader autoprefixer --save-dev
//图片字体文件加载器
npm install url-loader img-loader file-loader
//webpack打包框架
npm install html-webpack-plugin webpack webpack-dev-server --save-dev

webpack2项目介绍

这里写图片描述

这是我写的一个demo，这个demo用的就是webpack2打包的将bootstrap、jQuery、Vue整合在一起了，在vue和bootstrap的整合期间发现如果用到vue的组件部分bootstrap的部分样式会失效，所以这里在写demo时刻意回避了使用vue的组件，下图是vue与bootstrap组合使用的效果
demo视图

视图部分是通过bootstrap的样式部分完成的自己只是写了少部分的样式代码，界面的交互以及分页部分翻页实现则是通过vue实现的，
这里多页面打包的方式是在webpack.config.js文件中配置的

//入口点配置的js文件,chunk
entry: {
//公共js部分
commons:[
'lib/jquery-2.1.0.js',
'lib/bootstrap/js/bootstrap.min.js',
'lib/vue.js'
],
//index.html专属的入口文件
app: path.resolve(__dirname, '../src/views/index/index.js'),
//test.html的js入口文件
test:path.resolve(__dirname, '../src/views/test/index.js')
},
//入口点的js模块配置好后接下来就是plugin部分的html插件部分
plugins:[
new HtmlWebpackPlugin({
filename: 'index.html', //设置最后生成文件名称;
//这个模板是ejs文件
template: path.resolve(__dirname,'../src/views/index/index.ejs'),
chunks:['commons','app']//指定index页面需要的模块
}),
new HtmlWebpackPlugin({
filename: 'test.html', //设置最后生成文件名称;
template: path.resolve(__dirname,'../src/views/test/index.html'),
chunks:['commons','test']//指定test页面需要的模块
}),
//webpack内置自动加载插件
new webpack.ProvidePlugin({
vue: 'lib/vue.js',//遇到vue的变量会按照配置的文件路径加载vue模块
jQuery:'lib/jquery-2.1.0.js'
})
],
//路径别名配置，让模块加载更直观
resolve: {
//设置可省略文件后缀名(注:如果有文件没有后缀设置‘’会在编译时会报错,必须改成' '中间加个空格。ps:虽然看起来很强大但有时候省略后缀真不知道加载是啥啊~);
extensions: [' ','.css','.less','.js','.json','.vue'],
//模块路径查找时先从数组第一个开始寻找，找不到在去node_modules目录下寻找
modules: [path.resolve(__dirname, "src"), "node_modules"],
//别名设置
alias: {
"components":path.resolve(__dirname,'../src/components'),
"assets":path.resolve(__dirname,'../src/assets'),
"lib":path.resolve(__dirname,'../src/lib'),
}
}