lengziyu / learn-webpack Goto Github PK

View Code? Open in Web Editor NEW

279.0 279.0 92.0 613 KB

记录学习的webpack

JavaScript 73.28% CSS 5.25% HTML 21.48%

learn-webpack's People

Contributors

Stargazers

Watchers

Forkers

cqgsm robynluo edenpp daisty winglau14 hbjlamp shengxinjing ecommerce888 liangzy filcoins daisyhuli champion688 benbenche h5wang liuxueliang111 carloxiang xiaojiu01 luhaiping mechagirls yplayypay zhaomin94 ly2513 msi1979 eggao tanggaozeng ddr0001 xinlihai juzoom kirin-yuen mrruantion pht1991 houningzhou jieswift lisha0839 ch13g wangyoukun gertyxs ninnka tan2009216028 volantwizard kxws888 caixudong1223 jmx1316 mt0803 andyhuang123 yaowenqiang lzxxxx suanmou joeth rainbowmiao waymy yongfengf12 brandon-ming qianshou wangsh5 fffweb jerry-goodboy carldai0106 smileforward123 zoroming emifan qfallen5858 mjfunny xulin56 houweirong zhan8863 allengkc cultbiscuit mazhp shikaids vikeel wifi0918 since92x agui888 mzn0918 wjq66 boolak nicedreamer laoniusanche teachat8 yuejianjian fengzhiyuanyi zhouxigui007 mysouler doudou1016 ooliiloo hhy5277

learn-webpack's Issues

webpack resolve教程[入门篇]

webpack在构建包的时候会按目录的进行文件的查找，resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀：

webpack是什么

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

webpack优势

模块来源广泛，支持包括npm/bower等等的各种主流模块安装／依赖解决方案；
模块化规范支持全面，AMD/CommonJS一应具全；
插件机制完善，实现本身实现同样模块化，容易扩展；
Webpack 使用异步 I/O 和多级缓存提高运行效率，这使得 Webpack 能够以令人难以置信的速度快速增量编译。

安装

首先要安装 Node.js， Node.js 自带了软件包管理器 npm，Webpack 需要 Node.js v0.6 以上支持，建议使用最新版 Node.js。
用 npm 全局安装 Webpack：

$ npm install webpack -g

初始化配置文件 package.json ：

$ npm init

到项目目录安装，将 webpack 添加到 package.json ：

$ npm install webpack --save-dev

webpack常用命令

webpack 最基本的启动webpack命令
webpack -w 提供watch方法，实时进行打包更新
webpack -p 对打包后的文件进行压缩
webpack -d 提供SourceMaps，方便调试
webpack --colors 输出结果带彩色，比如：会用红色显示耗时较长的步骤
webpack --profile 输出性能数据，可以看到每一步的耗时
webpack --display-modules 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块

前面的四个命令比较基础，使用频率会比较大，后面的命令主要是用来定位打包时间较长的原因，方便改进配置文件，提高打包效率。

例子

首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js：

<!-- index.html -->
<html>
<body>
  <script src="bundle.js"></script>
</body>
</html>

// entry.js
document.write('It works.')

然后编译 entry.js 并打包到 bundle.js：

$ webpack entry.js bundle.js

打包过程会显示日志：

Hash: e964f90ec65eb2c29bb9
Version: webpack 1.12.2
Time: 54ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./entry.js 27 bytes {0} [built]

用浏览器打开 index.html 将会看到 It works.

webpack Loader的使用教程及常用的loader[入门篇]

介绍loader

webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。
loader机制的存在让webpack拥有了无限的可能性，让webpack几乎可以容纳一切前端需要的资源。同时合理得利用loader也有助于我们在架构项目的时候省去很多重复工作。

loader特性

Loader 可以通过管道方式链式调用，每个 loader 可以把资源转换成任意格式并传递给下一个 loader ，但是最后一个 loader 必须返回 JavaScript；
Loader 可以同步或异步执行；
Loader 运行在 node.js 环境中，所以可以做任何可能的事情；
Loader 可以接受参数，以此来传递配置项给 loader；
Loader 可以通过文件扩展名（或正则表达式）绑定给不同类型的文件；
Loader 可以通过 npm 发布和安装；
除了通过 package.json 的 main 指定，通常的模块也可以导出一个 loader 来使用；
Loader 可以访问配置；
插件可以让 loader 拥有更多特性；
Loader 可以分发出附加的任意文件。

Loader 本身也是运行在 node.js 环境中的 JavaScript 模块，它通常会返回一个函数。大多数情况下，我们通过 npm 来管理 loader，但是你也可以在项目中自己写 loader 模块。

使用loader

安装loader：

$ npm install css-loader style-loader

在页面中引入一个 CSS 文件 style.css，首页将 style.css 也看成是一个模块，然后用 css-loader 来读取它，再用 style-loader 把它插入到页面中：

/* style.css */
body { background: yellow; }

在入口页面添加style.css：

require("!style!css!./style.css") // 载入 style.css

重新编译打包，刷新页面，就可以看到黄色的页面背景了。

如果每次 require CSS 文件的时候都要写 loader 前缀，是一件很繁琐的事情。我们可以根据模块类型（扩展名）来自动绑定需要的 loader。

将 entry.js 中的 require("!style!css!./style.css") 修改为 require("./style.css") ，然后执行：

$ webpack entry.js bundle.js --module-bind 'css=style!css'

显然，这两种使用 loader 的方式，效果是一样的。

常用loader

预处理篇：

css-loader 处理css中路径引用等问题
style-loader 动态把样式写入css
sass-loader sass编译器
less-loader less编译器
postcss-loader sass再处理

例子：

npm install --save -dev css-loader style-loader sass-loader less-loader postcss-loader

module: {
  loaders: [
    {test: /\.css$/, loader: "style!css?sourceMap!postcss"},
    {test: /\.less$/, loader: "style!css!less|postcss"},
    {test: /\.scss$/, loader: "style!css!sass|postcss"}
  ]
}

js处理篇：

babel-loader es6转换
jsx-loader 支持jsx语法

例子：

npm install --save-dev babel-core babel-preset-es2015 babel-loader jsx-loader

新建一个名字为.babelrc的文件：

{
  "presets": ["es2015","react"],
  "plugins":["antd"]
}

新建一个名字为webpack.config.js文件：

module.exports ={
 entry: './entry.js',
 output: { path: __dirname,
 filename: 'bundle.js'
 },
 module: {
loaders: [
  {test: /\.js$/, loader: "babel", exclude: /node_modules/},
  {test: /\.jsx$/, loader: "jsx-loader"}
  {test: /.css$/, loader: 'style!css'} ]
  }
};

webpack Plugin的使用教程及常用的plugin[入门篇]

插件可以完成更多 loader 不能完成的功能，插件的使用一般是在 webpack 的配置信息 plugins 选项中指定，Webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。

plugins: [
     //your plugins list
 ]

webpack常见问题及解决方法汇总

require cdn 这样会报错：

var jquery = require("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js");

解决方法：

var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
  $('body').html('It works!')
});