工具主页：它有一个亮点看上去挺吸引人的，就是能解决代码分割（)的问题For big web apps it’s not efficient to put all code into a single file. Especially if some blocks of code are only required under some circumstances. webpack has a feature to split your codebase into “chunks” which are loaded on demand. Some other bundlers call them “layers”, “rollups”, or “fragments”. This feature is called “code splitting”.It’s an opt-in feature. You can define split points in your code base. webpack cares for the dependencies, output files and runtime stuff.大的项目如果用requirejs或browserify管理，把所有的js都打包在一起会很臃肿，webpack似乎能解决这个问题？（个人理解：AMD或commonJS似乎解决的是延迟加载的问题，在网络不好的情况，最理想的会不会是延迟下载或按需下载，即与其下载一个体积很大的包含所有模块的打包（bundled and minified)文件，还不如只下载所需的模块即可）大家有没有用过这个工具，这个工具用起来坑多吗？
首先对赵同学说的『如果上线后还是一堆零散的文件，这个依赖管理工具还是趁早别做了...』不赞同，对于很多应用而言，首屏的js只占全部js的很小一部分，如果只合并首屏js，对于其它的js做动态加载带来的展示上的提速很明显；另一个原因是一些库文件极少更新，而业务文件更新频率比较高，如果把库文件和业务文件拆开，在客户端也能利用上浏览器缓存。拆模块不仅仅是为了开发时的方便与效率，对线上优化同样有一定作用。&br&&br&回到webpack，这确实是一个非常优秀的工具，能想到的一些功能（node端与浏览器端共用代码，模块依赖管理，代码拆分，通过插件加载其它类型资源）webpack都有，以前我想过一个东西叫OJOC（one javascript file one component，js文件里包含组件需要的一切），webpack的loader搞搞很轻松就做到了。&br&&br&说个意外的小坑，如果package.json格式错误，打包时会报 ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory'，让人很摸不着头脑，添加参数 --display-error-details 才知道是package.json解析错误，别的坑暂时还没有遇到。&br&&br&推荐玩一玩
首先对赵同学说的『如果上线后还是一堆零散的文件，这个依赖管理工具还是趁早别做了...』不赞同，对于很多应用而言，首屏的js只占全部js的很小一部分，如果只合并首屏js，对于其它的js做动态加载带来的展示上的提速很明显；另一个原因是一些库文件极少更新…
看了其他人的答案，来讲个不一样的！&br&开发可维护的js代码与css代码&br&&br&css模块化；&br&&b&以需求来代入：&/b&&br&大家在开发中是否经常会有这样的困扰，在css的命名、复用上找不到好的解决方案。&br&比如有一个系统中有这样两个列表页面(list)，包含需要展示的内容是大体上一样的，但是布局展示样式切是要求不一样的。&br&比如：&br&&br&&img src=&/72d44ea95f31_b.jpg& data-rawwidth=&669& data-rawheight=&141& class=&origin_image zh-lightbox-thumb& width=&669& data-original=&/72d44ea95f31_r.jpg&&&img src=&/2851e9f4d7b411e2db68_b.jpg& data-rawwidth=&800& data-rawheight=&488& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&/2851e9f4d7b411e2db68_r.jpg&&&br&&br&&b&平常做法&/b&&br&我们平时的做法是，做命名两种css&br&.list-1{&br&.....&br&}&br&.image-1{&br&....&br&}&br&--------------------------------------------------------------------&br&.list-2{&br&.........&br&}&br&.image-2{&br&........&br&}&br&&br&这样做可以满足我们的需求，但是你需要为每套布局想一个【样式名称】，而且我们平时写css代码一般放在同一个页面内，后续不好维护。&br&&b&webpack的做法&/b&&br&（1）解决样式命名，为单独的某块写一个css文件，通过require的形式引入样式。如下：&br&&img src=&/18dfecc4e15_b.jpg& data-rawwidth=&399& data-rawheight=&135& class=&content_image& width=&399&&两个css文件内的样式可以重名，webpack打包的时候生成的样式名是 模块名_css_随机字符(可以自定义规则)。这样来确保两个样式是独立的。如下，我们定义css名称为.item-btn，webpack打包后，在浏览器下生成的样式名如下：&br&&img src=&/fa1dc2cef61cbe43be763f1c1e84d955_b.jpg& data-rawwidth=&1198& data-rawheight=&43& class=&origin_image zh-lightbox-thumb& width=&1198& data-original=&/fa1dc2cef61cbe43be763f1c1e84d955_r.jpg&&js内的具体调用如下：&br&&img src=&/a815fd063b63ca1daf46a054ef7c81dd_b.jpg& data-rawwidth=&589& data-rawheight=&143& class=&origin_image zh-lightbox-thumb& width=&589& data-original=&/a815fd063b63ca1daf46a054ef7c81dd_r.jpg&&&br&（2）解决样式复用。&br&你可以用css模块化里面的compose来处理&br&&img src=&/c336db9db88bac86b6bbd2_b.jpg& data-rawwidth=&826& data-rawheight=&428& class=&origin_image zh-lightbox-thumb& width=&826& data-original=&/c336db9db88bac86b6bbd2_r.jpg&&&br&&b&js模块化：&/b&&br&es6想必大家已经都已跃跃一试，无奈浏览器支持太少了。&br&想想es6的（promise、=&、let ......）
大家都去试一下吧，越来越像服务端语言了。&br&webpack打包时，通过调用babel的配置可以将我们的es6代码转化为es5代码，实现浏览器的全兼容。&br&这个requirejs应该实现不了吧！&br&也许很快我们就看不到requirejs了吧！&br&&br&&b&webpack与react&/b&&br&了解过react的同学，可能就会有体会了。webpack对react来说可谓开发神器。
看了其他人的答案，来讲个不一样的！ 开发可维护的js代码与css代码 css模块化； 以需求来代入： 大家在开发中是否经常会有这样的困扰，在css的命名、复用上找不到好的解决方案。 比如有一个系统中有这样两个列表页面(list)，包含需要展示的内容是大体上一样…
已有帐号？
无法登录？
社交帐号登录
南大前端交流群/Angular2兴趣小组 私信?Javascript模块加载捆绑器Browserify Webpack和SystemJS用法 -解道Jdon
& & & &&& & &
　　Javascript中模块加载器从最初小而简单的LABjs到RequireJS、Browserify、Webpack和SystemJS一直在演进发展。
LAB和curl等最初懒加载Javascript库包的方式虽然解决了浏览器加载大量不必要JS库包造成的堵塞问题，但是不利于维护。
Require.JS
是出现在2009年，它完全不同于之前的那些懒加载器，它将脚本标签写入到DOM中，监听完成的事件，然后递归加载依赖：
src=&tools/require.js&
data-main=&myAppInit.js& &&/script&
...或者如下调用指明的函数名称...
src=&tools/require.js&&&/script&
require([&myAppInit&, &libs/jQuery&],
function (myApp, $) { ...
上面两个用法不建议同时使用。虽然Require存在各种特殊情况，但是其灵活性和强大性还是支持它成为浏览器端流行的加载器。
Browserify
允许CommonJS格式模块在前端使用，因此，它不只是一个模块加载器，而是模块捆绑器(bundler)，是一个完整的代码构建段的工具，提供客户端能加载一堆代码的功能。
首先需要node和npm已经安装，获得包：
npm install -g –save-dev browserify
以CommonaJS格式编写你的模块即可。然后使用下面命令捆绑：
npm install -g –save-dev browserify
它会递归以此发现entry-point中所有依赖包，然后将它们组装在一个单个文件中：
&script src=&bundle-name.js&&&/script&
对于前端，你可以最小化合并核心代码，然后让可选模块在之后需要时加载，这样即节约了带宽也不影响模块编程功能实现。
遵循Browserify的模块捆绑器路线，但是假如足够多功能来实现构建系统，不仅支持AMD还支持ES6格式，也支持CSS样式和HTML模板。
Webpack运行在一个称为“loaders”的概念上，这是一个插件注册用于处理文件类型，比如，一个loader能处理ES6 transpilation 或SCSS编译。
Loaders将数据喂给一个chunk，chunk开始于一个起点（类似于Browserify的捆绑器），一旦Webpack被设置好，只要配置产生变化，这些chunk会被自动重新产生，这就非常自动化强大。
关于热点模块替代问题，当运行webpack-dev-server，当你修改源码时，它能知道并修改浏览器中的代码，类似于其他源码监控器，它不需要浏览器重新载入或重启，这样就节约大量开发时间。
npm install -g –save-dev webpack
打包到一个起点文件：
webpack ./entry-point.js bundle-name.js
可看成是ES6模块加载器Polyfill的浏览器接口，Polyfill不仅能在浏览器中使用，而且可以在Node环境通过NPM使用。
SystemJS实现类似于RequireJS：
src=&system.js&&&/script&
// 设置我们的
baseURL 引用路径
System.config({
baseURL: '/app'
/app/main.js
System.import('main.js');
SystemJS是Angular.js 2.0的推荐加载器，它也支持非JS文件类型，使用systemjs-builder插件工具可以实现捆版和优化文件。
SystemJS 最强大的组件是JSPM，或称为Javascript包管理器，基于ES6模块加载器Polyfill和npm建立，JSPM能够使得isomorphic同构Javascript成为现实。
比较总表如下：
| 网站地图 | 设为首页<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&webpack怎么处理没有模块规范的js，比如zepto等_问答_ThinkSAAS
webpack怎么处理没有模块规范的js，比如zepto等
webpack怎么处理没有模块规范的js，比如zepto等
webpack怎么处理没有模块规范的js，比如zepto，zepto-scroll等
Shimming: https://webpack.github.io/docs/shimming-modules.html
External: https://webpack.github.io/docs/library-and-externals.html
Npm module: /package/webpack-zepto
添加你想要问的问题
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权：
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
让ThinkSAAS更好，把建议拿来。
开发客服微信还没有任何记录...
webpack安装与配置
作者： 懒人建站
webpack是一个前端工具，可以让我们进行各种模块加载，预处理后，再打包，任何静态资源都可以视作模块，然后模块之间也可以相互依赖，通过webpack对模块进行处理后，可以打包成我们
webpack功能特性
支持CommonJs和AMD模块，意思也就是我们基本可以无痛迁移旧项目。
支持模块加载器和插件机制，可对模块灵活定制。特别是我最爱的babel-loader，有效支持ES6。
可以通过配置，打包成多个文件。有效利用浏览器的缓存功能提升性能。
将样式文件和图片等静态资源也可视为模块进行打包。配合loader加载器，可以支持sass，less等CSS预处理器。
内置有source map，即使打包在一起依旧方便调试。
webpack是一个前端工具，可以让我们进行各种模块加载，预处理后，再打包，任何静态资源都可以视作模块，然后模块之间也可以相互依赖，通过webpack对模块进行处理后，可以打包成我们想要的静态资源。
安装webpack
首先新建一个webpack101的项目，在cmd下面进入webpack101目录
我们通过npm来将webpack安装到全局
npm install webpack -g
一个最简单的webpack配置示例
webpack配置
webpack是需要进行配置的，我们在使用webpack的时候，会默认&webpack.config.js&为我们的配置文件。所以接下来，我们新建这个js文件。
//webpack.config.js
var path = require(&path&);
module.exports = {
entry: &#39;../src/entry.js&#39;, //演示单入口文件
path: path.join(__dirname, &#39;out&#39;),
//打包输出的路径
filename: &#39;bundle.js&#39;,
//打包后的名字
publicPath: &./out/&
//html引用路径，在这里是本地地址。
编写入口示例文件
接下来就编写我们的入口文件&entry.js&和第一个模块文件&module1.js&。里面只用来加载一个Js模块。
// entry.js
require(&./module1&); // 使用CommonJs来加载模块
// module1.js
console.log(&Hello Webpack!&);
启动webpack
一切准备好后，我们仅需要在项目根目录下，用命令行&webpack&执行一下即可。
// webpack 命令行的几种基本命令
// 最基本的启动webpack方法
webpack -w // 提供watch方法，实时进行打包更新
webpack -p // 对打包后的文件进行压缩，提供production
webpack -d // 提供source map，方便调试。
webpack成功运行后，我们就可以看到根目录出现了out文件夹，里面有我们打包生成的&bundle.js&。我们最后通过在&index.html&里对这个文件引入就可以了。我们可以在控制台看到我们想要的结果，&Hello Webpack !
多模块依赖
刚才的例子，我们仅仅是跑通了webpack通过&entry.js&入口文件进行打包的例子。下面我们就来看一下它是否真的支持CommonJs和AMD两种模块机制呢？下面我们新建多几个js文件吧！
// 修改module1.js
require([&./module3&], function(){
console.log(&Hello Webpack!&);
下一个文件
// module2.js，使用的是CommonJs机制导出包
module.exports = function(a, b){
return a +
下一个文件
// module3.js，使用AMD模块机制
define([&#39;./module2.js&#39;], function(sum){
return console.log(&1 + 2 = & + sum(1, 2));
这里仅仅是展示用的，在做项目的时候一定要统一规范采用同一种规范编写代码
加载器loader
大家都听过的就是&CoffeeScript&和&Sass&了，webpack可以一次性解决这些预处理器问题
这里用Sass和babel编译ES2015为例
安装loader
我们第一步就是先要安装好各个必须的loader，使用npm安装如下loader
npm install style-loader css-loader url-loader babel-loader sass-loader file-loader --save-dev
在webpack.config.js中配置loader
安装完各个loader后，需要在webpack.config.js中配置loader，载入这些加载器。
// webpack.config.js
module.exports = {
entry: path.join(__dirname, &#39;src/entry.js&#39;),
path: path.join(__dirname, &#39;out&#39;),
publicPath: &./out/&,
filename: &#39;bundle.js&#39;
// 新添加的module属性
注意query: {presets: [&#39;es2015&#39;]}，没有这个你要用es6的语法可能不会被转换成es5
loaders: [
{test: /\.js$/, loader: &babel&,query: {presets: [&#39;es2015&#39;]} },
{test: /\.css$/, loader: &style!css&},
{test: /\.(jpg|png)$/, loader: &url?limit=8192&},
{test: /\.scss$/, loader: &style!css!sass&}
我们主要看看module的loaders。loaders是一个数组，里面的每一个对象都用正则表达式，对应着一种配对方案。比如匹配到js后缀名就用babel-loader，匹配到scss后缀名的就先用sass，再用css，最后用style处理，不同的处理器通过&!&分隔并串联起来。这里的loader是可以省略掉&-loader&这样的，也就是原本应该写成&style-loader!css-loader!sass-loader&，当然我们必须惜字如金，所以都去掉后面的-loader 如：style!css!sass
我们仅仅是配置一下，已经是可以直接用ES2015和SASS去写我们的前端代码了。在此之前，我们对src文件夹里再细分成js，css，image三个文件夹，处理好分层。
稍微复杂的webpack项目
bebel-loader（解析es6的加载器）
// js/es6-module.js
class People{
constructor(name){
this.name =
console.log(`hi ${this.name} !`);
exports.module = P
写好模块后，我们直接在&entry.js&入口文件中引入该模块。
// entry.js
// javascript
require(&#39;./js/module1&#39;);
let People = require(&#39;./js/es6-module&#39;);
let p = new People(&Yika&);
p.sayHi();
require(&#39;./css/main.scss&#39;);
有了这个解析es6的加载器bebel-loader就可以在中使用es6语法和es6特性，如果你会es6的话，es6写已经是大势所趋了，现在git上分享的代码很多都开始用es6语法了，不会es6就看不懂人家的代码了。
sass-loader（解析sass的加载器）
大家或许注意到了下方的css的require，那就是用来加载Sass样式的。我们通过启动style-loader会将css代码转化到&&style&&标签内，我们看一下里面的内容。
// css/main.scss
html, body{
background: #
最后我们打开&index.html&观察我们所有的结果，首先背景已经是淡灰色的，并且控制台也有我们想要的内容。我们通过查看DOM结构，可以发现&head&标签里多出了style&标签，里面正是我们想要定制的样式。
webpack对图片打包
我们之前也说，webpack对与静态资源来说，也是看作模块来加载的。CSS我们是已经看过了，那图片是怎么作为模块打包加载进来呢？这里我们可以想到，图片我们是用url-loader加载的。我们在css文件里的url属性，其实就是一种封装处理过require操作。当然我们还有一种方式就是直接对元素的src属性进行require赋值。
background: url(../image/img.jpg)
var img = document.createElement(&img&);
img.src = require(&../image/img.jpg&);
document.body.appendChild(img);
上述两种方法都会对符合要求的图片进行处理。而要求就是在url-loader后面通过query参数的方式实现的，这里就是说只有不大于8kb的图片才会打包处理成Base64的图片。关于query
{test: /\.(jpg|png)$/, loader: &url?limit=8192&}
打包成多个资源文件
在开发多页面的站点的时候，还是需要希望能有多个资源文件的。这样我们就可以有效利用缓存提升性能，做到文件按需加载。如何写入口文件，这里就不再赘述了，我们直接看如何对&webpack.config.js&进行修改。
// webpack.config.js
page1: &entry.js&,
page2: &entry2.js&
path: path.join(__dirname, &#39;out&#39;),
publicPath: &./out/&,
filename: &#39;[name].js&#39;
这里重点关注两个地方，entry属性可以是一个对象，而对象名也就是key会作为下面output的filename属性的&[name]&。当然entry也可以是一个数组，更多用法都可以去webpack的&&进行查看。
当然webpack也考虑到公共模块的利用，我们利用插件就可以智能提取公共部分，以提供我们浏览器的缓存复用。我们只需要在&webpack.config.js&添加下面的代码即可。
// 修改添加，webpack.config.js
var webpack = require(&#39;webpack&#39;);
module.exports = {
// ....省略各种代码
plugins: [
new monsChunkPlugin(&#39;common.js&#39;)
我们做个小测试，让第二个入口文件也加载我们之前的&es6-module.js&。然后我们用webpack进行打包，就发现生成的&common.js&里是有相应代码的。我们需要手动在html上去加载&common.js&，并且是&必须要最先加载&。
独立出css样式
如果我们希望样式通过&&link&&引入，而不是放在&&style&&标签内呢。这个时候我们就要配合插件一起使用啦，我们一起来看看。
npm install extract-text-webpack-plugin --save-dev
安装完插件就要配置&webpack.config.js&了。我们添加以下代码
var ExtractTextPlugin = require(&extract-text-webpack-plugin&);
module.exports = {
// ...省略各种代码
loaders: [
{test: /\.js$/, loader: &babel&},
{test: /\.css$/, loader: ExtractTextPlugin.extract(&style-loader&, &css-loader&)},
{test: /\.(jpg|png|svg)$/, loader: &url?limit=8192&},
{test: /\.scss$/, loader: &style!css!sass&}
plugins: [
new monsChunkPlugin(&#39;common.js&#39;),
new ExtractTextPlugin(&[name].css&)
为了区分开用&&link&&链接和用&&style&&，我们这里以CSS后缀结尾的模块用插件。我们重点关注一下使用了ExtractTextPlugin的模块，在ExtractTextPlugin的extract方法有两个参数，第一个参数是经过编译后通过style-loader单独提取出文件来，而第二个参数就是用来编译代码的loader。
当然，插件也支持所有独立样式打包成一个css文件。增加多一个参数即可。
new ExtractTextPlugin(&style.css&, {allChunks: true})
本文链接：/javascript/webpackazypz_1090.html
webpack安装与配置由懒人建站收集整理，您可以自由传播，请主动带上本文链接
就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。
(责任编辑：懒人建站)
webpack安装与配置-相关文章
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）