Open lcxfs1991 opened 8 years ago
至少,完善一下开发者文档啊
你是指那个boilerplate吗?我这两天弄一下哈。
不是,重复了下webpack会取代gulp哈! :) 觉得webpack文档超乱 : (
因为它是配置型的构建,所以内容比较多。而且例子也不足。 gulp属于任务型的,更多依赖插件,所以文档相对简单一些。
谢谢分享。对学习 Webpack 很有帮助 :+1:
另建议给代码块加语法着色效果。部分图片也可以以代码块的方式来显示。
谢谢哈。有什么好的优化点都可以提出来,我整理一下。
感觉webpack还是很难取代gulp,有些功能在webpack中处理起来很自然(各种预处理的loader以及optimize、define等plugins),有些任务尤其是核心代码之外的感觉在gulp中更自然。
比如gulp-html-replace这个插件,做的工作其实和html-webpack-plugin差不多,但是这种任务其实和js/css代码关系不大,更多是核心代码之外的页面内容替换。 当然强行放在webpack里面也可以,但是总感觉哪里不对(我的webpack.config.js本来就50行左右,这个一加配置至少十来行,可能还需要自己写点代码)。但是放在gulp里面就感觉超自然的一个任务。
编译慢的问题可以试试这个 webpack-hot-middleware,配合 webpack-dev-middleware
可以在文件改动时只编译相关的文件而不需要全部重新编译
webpack 在使用extract-text-webpack-plugin 抽取出css时, css 中的 相对路径会被改变
例: 在app.vue 中 style 有 .shop {background: url('../images/experience/page1_background.jpg') center center no-repeat;}
在经过 new ExtractTextPlugin('./css/styles.[contenthash].css') 生成后文件目录: indx.html js/ css/style.[contenthash].css
.shop {background: url(./images/page1_background.jpg) center center no-repeat;}
@dericgit 恩。应该是会根据你图片的生成路径去调整的。毕竟你src文件夹下面img和css的相对位置跟你最终生成的时候可能会不一样
请教一下个问题:
如果我给 react
配置了别名
resolve: {
extensions: ['', '.js', '.jsx', '.es6', 'css', 'scss', 'png', 'jpg', 'jpeg'],
alias: {
'react': path.join(NODE_MODULES_PATH, '/react/dist/react.js')
}
}
但我的项目依赖的一个第三方库中的一个组件 module1.js
存在这样的引用
var PropTypes = require('react/lib/ReactPropTypes');
在我的项目编译的时候,就会出错
Module not found: Error: Cannot resolve 'file' or 'directory' myProject/node_modules/react/react.js/lib/ReactPropTypes in myProject/node_modules/thirdFrame/module1
那么,问题是:像这种配置别名的使用,如何做一个容错处理?毕竟第三方库如何引用一个文件是不可控的。
目前确实没有办法。
不过开发环境直接设react的alias,react官方并不建议,因为有些warning和报错会没掉。
而生产环境的话,一般建议将react单独外链,可用externas : {react: React}
谢谢分享
早看到就好了 解释的很详细和深入
谢谢分享
看帖回帖是美德。
不错
webpack-stream 开启 watch 模式后速度会快很多
很实用,mark
看帖回帖是美德。干货。
我也觉得很不错,谢谢分享
受益匪浅~ 👍
mark
请问一下有没有关于在webpack编译之后,如何清除无用的thunk file文件的想法?
不错,谢谢分享
想请教一下怎么样能看到插件的依赖树呢? 就是我这个插件会依赖的别的哪些插件 还有具体版本
@NowhereToRun 可以通过peerDependency来看?
@lcxfs1991 好像不是.. peerDependency是在配置里面指定插件版本吧?
我找到的是webpack是怎么管理插件的依赖树的,例如A插件里面引用了B、C、D插件,但是在写devDependencies时可能只会写到A, BCD插件是webpack自动下载下来了
一般插件也主要是依赖webpack内置的插件,不过也有插件依赖loader的情况,例如html-res-webpack-plugin依赖html-loader,这个插件会在package.json指明。而如果是依赖内置插件的话,主要是通过peerDependency指定wepback版本即可。
@lcxfs1991 好的 谢谢。 我研究研究
遇到一个css注入后又注入个同名空的js现象。
我的入口文件:
entry: Object.assign(entries(), {
vender: ["jquery"],
common: getJsModule(),
css1: [path.resolve(__dirname, 'src/scss/base/_base.scss')],
css2: [path.resolve(__dirname, 'src/scss/index.scss'), path.resolve(__dirname, 'src/scss/home.scss')]
})
其中vender,common分别是第三方打包文件与业务共同文件。css分别是基础样式文件与业务样式,这个地方我预编译后抽出来了。
这个是我页面模板的配置:
var conf = {
filename: '../views/' + v + '.html',
template: './src/views/' + v + '.html',
chunks: ['vender', 'common', jsPath, 'css1', 'css2'], //为各个页面引入对应的
chunksSortMode: 'dependency' //根据依赖顺序加载文件,否则会出现加载问题
}
config.plugins.push(new HtmlWebpackPlugin(conf));
此处是动态生成的,v代表每个页面的名字,每个页面我都会插入共同的js/css,还有自己的业务js---jsPath.
然而奇怪的是,我编译后,页面head除了出入 两个css。在页面底部还分别注入了css1.js余css2.js。
这个多余的js文件是该如何去掉?还是我插入css有配置问题?
前言
本文不是webpack入门文章,如果对webpack还不了解,请前往题叶的Webpack入门,或者阮老师的Webpack-Demos。
为什么要使用Webpack
第3点我想稍微论述一下,如果看过我之前写的《如何写一个webpack插件(一)》,会发现,webpack会将文件内容存在compilation这个大的object里面,方便各种插件,loader间的调用。虽然gulp也用到了流(pipe)这样的内存处理方式,但感觉webpack更进一步。gulp是每一个任务(task)用一个流,而webpack是共享一个流。
简要回顾Webpack的配置
Webpack的配置主要为了这几大项目:
常用Loaders介绍
常用Plugins介绍
使用优化
了解了以上介绍的Loaders和Plugins之后,基本就可以搭建一整套基于Webpack的构建(不需要gulp与grunt,合图除外)。下面让我来介绍一下在使用过程中的一些优化点。
优化点一.如何区分开发及生产环境
优化点二.使用代码热替换
使用代码热替换在开发的时候无需刷新页面即可看到更新,而且,它将构建的内容放入内在中,能够获得更快的构建编译性能,因此是官方非常推荐的一种构建方式。
方法一:
1.将代码内联到入口js文件里![w1](https://cloud.githubusercontent.com/assets/3348398/12219594/40d8b65c-b785-11e5-82f2-5557084605dc.png)
2.启动代码热替换的plugins![w2](https://cloud.githubusercontent.com/assets/3348398/12219596/4a3acafa-b785-11e5-9836-0d0617c81d58.png)
方法二:
直接实现一个server.js,启动服务器(需要启动热替换plugin),下面是我在业务中用到的一个范例。具体的一些参数可以
方法三:
直接在webpack.config.js上配置。这个办法最简单,当然灵活性没有自己实现一个服务器好。![w3](https://cloud.githubusercontent.com/assets/3348398/12219636/b46bef20-b786-11e5-9116-3481c8f06e95.png)
优化点三.import react导致文件变大,编译速度变慢,乍办?
<script>
单独将react引入优化点四.将模块暴露到全局
如果想将report数据上报组件放到全局,有两种办法:
方法一:
在loader里使expose将report暴露到全局,然后就可以直接使用report进行上报
方法二:
如果想用R直接代表report,除了要用expose loader之外,还需要用ProvidePlugin帮助,指向report,这样在代码中直接用R.tdw, R.monitor这样就可以
优化点五. 合并公共代码
有些类库如utils, bootstrap之类的可能被多个页面共享,最好是可以合并成一个js,而非每个js单独去引用。这样能够节省一些空间。这时我们可以用到CommonsChunkPlugin,我们指定好生成文件的名字,以及想抽取哪些入口js文件的公共代码,webpack就会自动帮我们合并好。
优化点六. 善用alias。
resolve里面有一个alias的配置项目,能够让开发者指定一些模块的引用路径。对一些经常要被import或者require的库,如react,我们最好可以直接指定它们的位置,这样webpack可以省下不少搜索硬盘的时间。![w6](https://cloud.githubusercontent.com/assets/3348398/12219812/56bfd1aa-b78d-11e5-89d7-6bcc9230db81.png)
优化点七. alias的索引路径。
有时候你的node_modules包可能会放在上层父文件夹中,这时你可以使用resolve.moduledirectories来扩张你的索引路径,例如我们给redux做一个alias:
这样的话,它的索引路径会如下:
要注意的是多加索引路径可能会导致性能下降,所以除非项目复杂,否则慎用这个功能。
优化点八.多个html怎么办
仅使用app作为注入的文件:
不使用dev-helper作为注入文件:
如果你不想用inject模式,但又想使用html-webpack-plugin,那你需要在html里用
<script>
标签放入对应的js,以及用入对应的css。记住,这些资源的路径是在生成目录下的,写路径的时候请写生成目录下的相对路径。优化点九. html-webpack-plugin不用使inject模式没又md5,而且不支持文件内联怎么破?
当时我就给维护者提了一个issue--Add inline feature to the plugin。
然后维护者在开发的分支上加了这么一个特性(证明维护者不想在插件里加内联功能了,想让我来弄):
事件 允许其它插件去使用执行事件 html-webpack-plugin-before-html-processing html-webpack-plugin-after-html-processing html-webpack-plugin-after-emit
使用办法:
不过我还是决定自己开发一个了一个插件 html-res-webpack-plugin,有中英文文档可以参考。其实html-webpack-plugin以js作为入口可能跟webpack的理念更为一致,但其实直接在html上放link和
script
更加方便直白一些。而且html-webpack-plugin局限性太多,如果我想在script
上加attribute也是比较麻烦的事儿。所以我干脆开发一个可以允许在html上直接放link和script而且支持内联及md5的插件。但相信我之后也会针对html-webpack-plugin再写一个内联及md5的插件,适配一直在用这个插件的人。
优化点十.用gulp-webpack速度慢乍办
上图是初始化构建30个文件的用时,一共用了
13
秒。用了externals优化后,还有100多kb,比用纯webpack优化要大50多kb。而且,由于你用的是gulp-webpack,每次有文件改动,都必须全部重新编译一次。因此,跟react搭配建议还是不要用gulp-webpack。因为如果你使用webpack的话,即使初次启动时速度也并不快,但开发过程中,webpack会自动识别,只会重新编译有修改的文件,这大大加快了编译构建速度。没办法,老项目改造,真的要用,乍办?我提供以下思路 (1)当非js文件改变的时候,不要去跑js打包的任务 (2)非公共的js发生改变的时候,只执行这个js的打包任务
下图是优化了之后,在开发过程中非公共文件修改后的编译速度。我的娘,纯webpack只需要100多200ms。建议还是用webpack吧。![w5](https://cloud.githubusercontent.com/assets/3348398/12219746/98bab1a8-b78b-11e5-8710-4a9cdd70996b.png)
优化点十一.如果在通过webpack在项目中使用bootstrap, jquery以及fontawesome
这一点对于创业公司来说可能比较有用,它们的初期产品都需要快速上线,用一些比较成熟的UI框架会比较好。
这样,首先我们需要jquery文件,并且安装bootstrap(3.3.5) ,font-awesome(4.4.0),以及imports-loader(0.6.3)。还需要sass-loader(3.1.2)及less-loader(2.5.3)。
然后,在主要入口文件要这么引用下面的样式文件:
在webpack.config.js的entry项目里,可以加上这个vendor:
在loaders里加入以下loader,将jQuery暴露到全局:
再添加以下loader,让webpack帮助复制font文件
在plugins里添加ProvidePlugin,让$指向jQuery
这样,就可以同时使用jQuery, Bootstrap和Fontawesome了。
webpack会取代gulp吗
有样版boilerplate项目吗
目前有一个还没有成型的,我先放在这里,目前可以通过查看gulpfile.js和webpack.config.js文件进行学习 steamer_branch_v2。要成为boilerplate还待我花一周时间整理。
推荐文章
开发工具心得:如何 10 倍提高你的 Webpack 构建效率