webpack配置公共文件及js依赖问题
webpack配置公共文件及js依赖问题
最近在玩Vuejs，不可避免要学习webpack使用，然后被卡住了。问题：项目使用vuejs+webapck，但是webpack如何将框架级js打包成一个js文件，并使其有依赖关系？注意，所有js并不是用npm安装的，而是直接放在静态文件夹里的。比如有jquery.min.js和jquery-grid.js这两个框架公用性js，并且jquery-grid.js需要依赖jquery，webpack该怎么配置呢？麻烦知道的大神详细指导，非常感谢！
//这是我要依赖的包，单独打包成vendor.js
var dependencies = [
'vue-router',
'vue-resource',
app: './src/main.js',
vendor: dependencies
path: config.build.assetsRoot,
publicPath: config.build.assetsPublicPath,
filename: '[name].js'
plugins: [
new monsChunkPlugin({
name: "vendor",
minChunks : Infinity
new webpack.ProvidePlugin({
// io: "socket.io",
// toastr :'toastr'
全部代码 /papersnake/newdenfaces-vue/blob/master/build/webpack.base.conf.js
Copyright & 2016 phpStudy详解vue-cli + webpack 多页面实例配置优化方法 - 简书
详解vue-cli + webpack 多页面实例配置优化方法
vue+webpack是否有多页面
目前使用vue来做项目，估计大部分都是单页面（SPA）应用，一个轻型的 MVVM 框架，谁用了MVVM框架，就再也回不去JQ时代了，哈哈。
在手机端的项目，使用vue + vue-router是high到爆，不仅仅是我们开发的而言，最主要的用户体检也是开足马力，体检感杠杠的。
那问题来了，使用vue+webpack的单页面是爽到爆，那如果是多页面也能不能high到爆呢？那当然呀，必须的必，vue、webpack的忠粉（哈哈，好像这忠粉不关系到多页面的）。
在谷歌找vue 多页面，实例还是比较少，功夫不负有心人，在yaoyao1987那找到了，具体可以到这个，非常感谢yaoyao1987童鞋，今天要讲的内容是基于yaoyao1987童鞋的多页面实例上再优化的。
优化了点啥
demo、github地址
1、demo：2、github：
优化的内容
我们先来讲讲，具体我们优化了什么内容。
增加全局统一使用的模块Lib.js库，可能这里看不明白，不要紧，后面会讲到。
支持字体图标
增加干净的页面、组件的模板，复制即可以使用。
去掉多余的代码注释，坑了我的注释，别再坑人了
构建时，增加对css打包的支持
提取公共模块........
npm install
# 调试环境 serve with hot reload at http://localhost:8083/module/login.html
npm run dev
# 生产环境 build for production with minification
npm run build
本地默认访问端口为8083，需要更改的童鞋请到项目根目录文件config.js修改。
|---assets 资源
|---css.css
|---components 组件
|---Button.vue
|---module-head.vue
|---module各个页面模块
|---login.html
|---login.js
|---app.vue
|---welcome
欢迎页模块
|---welcome.html
|---welcome.js
|---app.vue
从目录结构上，各种组件、页面模块、资源等都按类新建了文件夹，方便我们储存文件。其实我们所有的文件，最主要都是放在module文件夹里，以文件夹名为html的名称。例如
|---login.html
|---login.js
|---app.vue
就是我们访问时的地址：
http://localhost:8083/module/login.html
这里一定要记住，在module里下级文件夹，一个文件夹就是一个html，js、vue template 都统一放在当前文件夹里，当然你也可以继续放其他的资源，例如css、图片等，webpack会打包到当前页面里。如果项目不需要这个页面了，可以直接把这个文件夹直接删除掉，干净项目，干活也开心。像以前我们传统开发项目，所有的图片都习惯放在images里，当项目有改动时，有些图片等资源用不上了，但还占着坑位，虽然现在的硬件容量大到惊人，但我们应该还是要养到一个良好的习惯。当前页面的开发在app.vue里，打开后你就会看到很熟悉的&template&、&script&、&style scoped&了。
全局统一公共模块
我们做多页面开发，那肯定会涉及到全局都能调用的公共库，或者是把别人封装的库也一起打包在全局公共模块里。
如果看过源码的童鞋，在*.vue页面里，我都统一import了一个文件
import Lib from 'assets/Lib.js'
这就是全局统一公共模块，我们先看看Lib.js里的代码
# 导入全局的css
import 'assets/css.css';
# 导入全局的站点配置文件
import C from 'assets/conf';
# 导入全局的共用事件
import M from 'assets/common';
var Rxports = {
module.exports = Rxports
在上方代码的M、C都是什么鬼，聪明的小伙伴就知道我想干嘛了，省写少事呗。例如我们现在想调用APP的名称，在.vue里可以这么写
import Lib from 'assets/Lib.js'
只需要在*.vue里导入import Lib from 'assets/Lib.js'，就可以到处使用全局模块了。不再像传统的开发模式，需要一堆的&script&一个一个的来放到页面的底部。传统方式：
&script type='text/javascript' src='///sj/lib/zepto/zepto.min.js' charset='utf-8'&&/script&
&&/script&
&script type='text/javascript' src='///msui/sm/0.6.2/js/sm.min.js' charset='utf-8'&&/script&
&script type="text/javascript" src="http://res./open/js/jweixin-1.0.0.js"&&/script&
这里就是我想讲的关于优化的第一点提到的全局模块库。当然也有童鞋问呀，会不会每个页面都会把这些全局模块库都打包在当前页面，那JS文件体积大到惊人。哎呀，你当webpack是二货的呀，webpack会自动帮你处理好的，会把在*.vue里的import Lib from 'assets/Lib.js'的库自动提取出来，放到一个全局的JS文件里，这就是自动构造的神奇呀，省心省电，妈妈再也不用担心我做重复的工作了。
在Lib.js里，我们也看到有两个导入的JS文件，主要来做什么的呢？为了更好的在全局调用模块里，知道哪个模块的作用是什么，另外在写代码时更能快速查找到JS文件，我区分了配置文件和共用事件文件，即conf、common，下面说下具体的用途。
# 储存站点的配置，例如web的名称、LOGO地址等
import C from 'assets/conf';
# 导入全局的共用事件，例如在微信的JS SDK初始化，每个页面都要分享，都需要初始化的，一次调用，全局使用，棒！！
import M from 'assets/common';
当然，你也可以不像这样区分不同的JS文件，删除也没有影响的，具体也要看项目的需要而定，不能死读书。
另外，如果想要干净的页面模块模板，可以到根目录的tpl里复制module_tpl整个文件夹，然后粘贴到src/module目录下马上就可以进行开发了，开发之前记得在cmd里npm run dev跑一遍，新增页面都要重新dev一遍。
module我们就讲到这里，下面我们来讲讲组件的调用，最爱组件了。
组件的使用
组件（Component）是 vue.js 最强大的功能之一，当你发现使用组件可以减少造轮子里，你会深深的爱上它。我们的组件都是放在components目录下的，调用组件的方法也很简单。
import Button from 'components/Button';
然后记得在*.vue注册导入的组件，要不然会影响使用。
import Button from 'components/Button';
export default {
components: {
# 在这里注册组件，不注册组件的话，是无法使用的。
如果想要干净的组件模板，可以到根目录的tpl里找到components_tpl的Hello.vue文件，复制粘贴到components目录下马上就可以进行开发了。
在yaoyao1987童鞋里，是没有打包构造图标字体的代码逻辑，这也是我优化上去的一部分，建议使用iconfont图标（ ，强大到无所不能，可以到iconfont下载自己想要的图标字体，记得是把文件放到\src\assets\font文件夹里。
webpack会自动打包的，无需理会，另外还有一点，iconfont提供的css文件，复制到\src\assets\css.css文件即可，要不然没有效果哈。在*.vue里使用调用就行了。
&i class="iconfont"&&#33&/i&
构建代码说明
那我们使用的是vue-cli的手脚架，用过vue+cli的朋友知道主要构建代码都放在根目录build下，vue多页面主要修改了这三个JS文件webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js
# 【webpack.base.conf.js】主要是构建的全局设置，主要是增加了以下代码，已经增加在JS文件里，这里只是做一个补充说明，具体请看`build/webpack.base.conf.js`。
var entries = getEntry('./src/module/**/*.js'); // 获得入口js文件
var chunks = Object.keys(entries);
plugins: [
// 提取公共模块
new monsChunkPlugin({
name: 'vendors', // 公共模块的名称
chunks: chunks, // chunks是需要提取的模块
minChunks: chunks.length
// 配置提取出的样式文件
new ExtractTextPlugin('css/[name].css')
function getEntry(globPath) {
var entries = {},
basename, tmp,
glob.sync(globPath).forEach(function (entry) {
basename = path.basename(entry, path.extname(entry));
tmp = entry.split('/').splice(-3);
pathname = tmp.splice(0, 1) + '/' + // 正确输出js和html的路径
entries[pathname] =
这里还要做一个特别说明，我们每次更新资源文件，为了去缓存，都会给文件生成hash值，例如：
&script type='text/javascript' src='vendors.a3df9869.js' charset='utf-8'&&/script&
&script type='text/javascript' src='vendors.js?f3aaf25de220e214f84e' charset='utf-8'&&/script&
这两者都是为了去缓存，唯一的区别的生成的文件名不一样，有些项目，为了可以能出严重BUG时第一时间回滚，以文件名+hash的方式储存，每次生成都不会覆盖之前的代码，以方便查BUG或者回滚。另一种方式，就是以文件名+?hash的方式储存，每次都会覆盖之前生成的资源，方便在某些特殊项目使用。我在webpack.base.conf.js也已经注释说明了。
module.exports = {
entry: entries,
path: config.build.assetsRoot,
publicPath: config.build.assetsPublicPath,
/* ---- 生成的例子 vendors.a3df9869.js --- */
//filename: '[name].[hash].js'
/* ---- 生成的例子 vendors.js?f3aaf25de220e214f84e --- */
filename: '[name].js'
不知不觉时间又过去，啰嗦一堆堆的，每个项目需求都不一样，配置也会有许不同，也希望更多的朋友分享自己的代码和想法出来哈，也可以一起交流。有需要一起交流的可以加我的微信，amwhuang，记得备注技术交流哈。
首发博客地址：如何配置webpack 可以让.vue文件直接在style里面引入一个其他模块的.less文件 - CNode技术社区
这家伙很懒，什么个性签名都没有留下。
项目里面要用到weui, 想根据需要加载weui里面对应的less让最终的文件最小化
这个需求怎么做啊?
&style lang=&less&&
&/style&
使用 less-loader 吧
然后提出来，用 ExtractTextPlugin
这种库还是bower或npm安装吧，不要自己去改weui里的文件。。。
在 &script& 里
require('../../node_modules/xxx/xxx.less')
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的最近项目上的事情不多，根据我自己的开发习惯，决定开发一些简单的开发架子，方便以后事情多的时候直接套用。本文讲的一个gulp+webpack+vue的单页应用架子，想要达到的目的：
可以通过命令打包开发chunk，并支持热替换
可以通过命令打包可发布的chunk
路由中的代码实现按需加载
用CommonJs的风格组织代码
代码结构尽量清晰易懂
尽我所能先做出一个满足以上特点的架子吧，最近看完ES6，准备再去看看flux和reduce，看过之后再来思考下前端数据如何管理比较科学规范。架子中有做的不规范可改进的地方，烦请大家指出，我好更新。
首先来看一下整个架子的结构：
2.1合并库文件
库文件不会随业务代码发生变化，所以所有库文件打包成一个文件就好了，这部分代码需要直接在页面中以&script&&/script&标签引入，不能和业务代码打包到一起。如果和业务代码打包到一起，一旦业务代码发生变化，整个打包的文件在浏览器中都需要被重新加载，这种做法不利于客户端做缓存，也会使webpack打包业务代码的过程变得非常慢，所以这里使用gulp合并一下库文件：
* 合并lib文件
gulp.task('concat-lib',function(){
gulp.src(['vue/dist/vue.min.js','vue-router/dist/vue-router.min.js'],{
cwd:'../lib'
}).pipe(concat('vue.min.js')).pipe(gulp.dest('../release'));
2.2组织业务代码
从上图可以看到，所有的业务开发代码都放在src目录下，展开来看：
components目录用来存放公用的vue组件，这块架子中没有，所以是空着的
css用来存放所有的样式文件，modules和components目录下分别存放各模块和各个组件所使用的样式，app.css是主入口页面样式，main.css是所有样式。把样式集中起来是为了方便样式的打包。
modules用来存放各个模块的代码，模块的模板和js代码放在同一目录下。
app.js是程序主入口js，在此文件中定义单页应用的路由，指向各个模块
index.html是应用主页面
核心代码是这块：
var Vue = require('vue')
var VueRouter = require('vue-router');
Vue.use(VueRouter);
var compo1=require('./modules/module1');
require('./css/main.css');
// 路由器需要一个根组件。
// 出于演示的目的，这里使用一个空的组件，直接使用 HTML 作为应用的模板
var App = Vue.extend({})
// 创建一个路由器实例
// 创建实例时可以传入配置参数进行定制，为保持简单，这里使用默认配置
var router = new VueRouter()
// 定义路由规则
// 每条路由规则应该映射到一个组件。这里的“组件”可以是一个使用 Vue.extend
// 创建的组件构造函数，也可以是一个组件选项对象。
// 稍后我们会讲解嵌套路由
router.map({
'/': {
component: compo1
'/path1': {
component: compo1
'/path2': {
component: function (resolve) {
//amd规范 实现效果：
//路由1中的模块和主页面模块打包在一起
//路由2中的模块按需加载
require(['./modules/module2'],resolve);
//commonJs规范实现方式:
//require.ensure([],function(require){
var comm2=require('./components/compo2');
resolve(comm2)
//默认路径
//router.go('/path1');
// 现在我们可以启动应用了！
// 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。
router.start(App, '#app')
默认模块是moduel1，/path1路由指向module1，/path2路由指向module2，module2的模块并不是和module1一样在主页面中一开始就加载好的，而是在路由到此路径后才去加载，app.js中提供了vue组件文档中提供的两种方式：CommonJs和AMD两种规范的方式来加载，两种方式是等价的。
require('./css/main.css'); 把所有css加载到应用中，以便在开发模式下可以看到样式，在打包发布代码的时候会忽略此require，将样式打包成独立的文件。
2.3打包开发代码
打包开发代码的webpack配置是build目录下的webpack.config.dev.js
var webpack = require('webpack');
var path=require('path');
module.exports={
//这里写成数组是为了dev server插入服务配置
&app&:['../src/app.js'],
path:path.resolve(__dirname, &../release&),//__dirname+'/../release',
publicPath: &/release/&,//dev server 会从此路径去拿hot-update.json
filename:'[name].bundle.js'
externals: {
'vue': 'Vue',
'vue-router':'VueRouter'
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{test:/\.html$/,loader:'html-loader'}
plugins: [
devtool: &source-map&
程序主入口是app.js，所有entry只需要配置一个app.js。
output配置中的publicPath是用来配置项目中静态文件路径的，这里开发过程中会使用webpack-dev-server，给配置到release目录下就行了。
externals下面配置的是通过标签引入，可以在全局环境下访问到的变量，可以通过require这里配置的key来获取那些变量。
devtool: &source-map& 可以为压缩之后的代码生成source-map文件，这里开发打包的代码并没有被压缩，所以这个其实没意义。
{test:/\.html$/,loader:'html-loader'} 是用来在组件中加载html模板的：
var template=require('./module1.html');
// 定义组件
var comm = Vue.extend({
template: template,
data:function () {
items:[{a:1,b:2,c:3},{a:4,b:5,c:5},{a:7,b:8,c:9}]
用上面的配置来打包，就会得到开发版本的打包代码了。
2.4使用webpack-dev-server和热替换插件HotModuleReplacementPlugin
为了方便开发调试，需要启动一个server来访问项目，并支持热替换，自动刷新浏览器，以方便修改代码之后能够实时看到效果。
在gulpfile.js做如下配置：
ar webpackConfigDev=require(&./webpack.config.dev.js&);
var WebpackDevServer = require(&webpack-dev-server&);
* 使用测试配置打包，启动hot dev server
gulp.task('webpack-dev',['concat-lib'],function(){
var config = Object.create(webpackConfigDev);
//这两项配置原本是在webpack.config.dev.js里边配置，可是通过gulp启动devserver，那种配置无效，只能在此处写入
//官网的解释是webpack-dev-server没有权限读取webpack的配置
config.entry.app.unshift(&webpack-dev-server/client?http://localhost:8080/&, &webpack/hot/dev-server&);
config.plugins.push(new webpack.HotModuleReplacementPlugin());
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
contentBase: &../&,
publicPath: &/release/&,
hot: true,
compress: false,
stats: { colors: true }
server.listen(8080, &localhost&, function() {});
// server.close();
这样会启动一个本地的8080端口监听，用来访问某个目录下的静态文件
contentBase: &../& 配置，指定了静态文件目录在项目根目录下，所以访问http://localhost:8080 会看到根目录下的文件列表，点进去src目录，就会默认访问index.html，看到单页应用的效果了
publicPath: &/release/& 这个配置很重要，它指定了webpack-dev-server提供的打包静态文件路径，值得注意的是，使用WebpackDevServer的时候，并不会在release目录生成webpack打包文件，只会在内存中生成打包文件，通过localhost:8080/release/ 路径，可以访问到开发打包后的代码。
通过gulp启动此server之后，访问http://localhost:8080/src 路径，可以看到用下面的效果：
可以看到，访问主页面的时候，加载了app.bundle.js打包文件，访问路由/path2的时候，才会去加载1.1.bundle.js文件，子组件是延迟2s后才加载的。
更新代码之后，会实时打包并刷新浏览器，看到实时效果。
2.5打包生产环境代码
和开发代码不同，生产环境代码具有以下特点：
代码需要压缩
打包生成的文件名中需要包含文件hash值，以方便控制客户端缓存
css不能像开发环境那样打包到js代码中，需要打包成独立的文件，在页面开头直接引入
基于以上特点，webpack配置文件如下：
var webpack = require('webpack');
var ExtractTextPlugin = require(&extract-text-webpack-plugin&);
var path=require('path');
var cssExtract=new ExtractTextPlugin(&[name].[contenthash:8].css&);
module.exports={
index:'../src/app.js'
path:path.resolve(__dirname, &../release&),
publicPath:&&,//TODO 填写生产环境静态文件路径
filename:'[name].[chunkhash:8].bundle.js'
externals: {
'vue': 'Vue',
'vue-router':'VueRouter'
loaders: [
{ test: /\.css$/, loader: cssExtract.extract(&style-loader&, &css-loader&) },
{test:/\.html$/,loader:'html-loader'}
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
drop_console: true,
warnings: false
cssExtract
其中publicPath是填写静态文件路径的，如果图片或其他静态资源需要存放在CDN服务器上，可以把CDN地址配置到这里。
生成打包文件之后，可以通过gulp替换掉主入口文件 index.html里面的静态文件路径，这里通过webpack模板也可以完成此工作，但配置较为繁琐，个人感觉还是通过gulp来替换比较方便一点：
gulp.src('../src/index.html')
//.pipe(greplace(/xxxxx/g,&xxxxx&))
.pipe(gulp.dest('../release'));
打包后的代码：
后面的步骤就是上传静态文件到CDN或其他上线流程了，这里可以通过根据自己业务编写的gulp插件来完成，大家业务不同，处理方式不尽相同，我就不继续往下写了。
3.把命令都整合到npm中
我个人不太喜欢项目根目录下一堆跟打包相关的文件，所以在这个项目中，我把所有跟打包相关的文件都放到了build目录下，然后在package.json中：
&scripts&: {
&dev&: &gulp default --gulpfile build/gulpfile.js&,
&build&: &gulp build --gulpfile build/gulpfile.js&,
&release&: &gulp release --gulpfile build/gulpfile.js&
这样就可以使用npm命令来执行上面的操作了：
npm run dev 启动webpack-dev-server，使用开发webpack配置来打包代码，支持热替换
npm run build 打包开发代码
npm run release 打包生产环境代码
对于一个可用单页应用而言，这个架子可能还缺着很多东西，对前端数据流程的管理、网络请求的管理、公共组件的组织等，在以后的项目中都会加上这些东西，用到了再往里边更新吧！
代码地址：
本文转自我的个人站点：
阅读(...) 评论()