Webpack的总结&插件

个人经验总结

不要太过迷信网上的各种demo，还是要自己对工具有一定的理解。

收集到的资料

1. webpack-demos

• 阮一峰老师写的demo，比较基础，入门

1. Webpack 中文指南

• 也是比较基础的入门教程

1. Webpack傻瓜式指南（一）
2. Webpack傻瓜指南（二）开发和部署技巧
3. Webpack傻瓜指南（三）和React配合开发

开发插件、loader、依赖包

----react、redux相关----

react

npm install react react-dom --save

---

redux

npm install redux --save

---

react-redux

npm install react-redux --save

---

reselect

npm install reselect --save

Simple “selector” library for Redux

---

react-router

npm install react-router --save

---

react-router-redux

npm install react-router-redux --save

---

redux-thunk

npm install redux-thunk --save

Thunk middleware for Redux.

---

----webpack相关----

webpack

npm install webpack --save-dev

---

webpack-dev-server

npm install webpack-dev-server --save-dev

---

----loader相关----

css-loader

npm install css-loader --save-dev

css-loader会遍历css文件，找到所有的url(...)并且处理。

---

style-loader

npm install style-loader --save-dev

style-loader会把所有的样式插入到你页面的一个<style>标签当中

---

sass-loader

npm install sass-loader node-sass --save-dev

要用sass-loader，必须有node-sass，但是这个模块有可能被墙掉，可以参考安装 node-sass 的正确姿势， 如不实在装不了才用连接中的方法

---

file-loader

npm install file-loader --save-dev

url-loader和file-loader加载器有什么区别？

---

url-loader

npm install url-loader --save-dev

根据你的需求将一些图片自动转成base64编码的，为你减轻很多的网络请求。
主要，要先有 file-loader

// 如果图片小于8192 bytes，就会转成Data URL
loaders: [
  { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
]

---

----ES6相关----

babel-loader

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

babel就不多说了，将ES6的语法转成ES5

---

babel-preset-react

npm install babel-preset-react --save-dev

只是我的个人猜测，这个让babel支持JSX的转换

结合上一个babel-loader，要在根目录下创建一个 .babelrc 文件，文件里写下面的内容
{
  "presets": ["react", "es2015"]
}

---

babel-plugin-transform-es2015-modules-simple-commonjs

npm install babel-plugin-transform-es2015-modules-simple-commonjs --save-dev

Babel转换es6怎么支持ie8?
该插件可以解决上述问题

要在根目录下创建一个 .babelrc 文件，文件里写下面的内容
{
  "presets": ["es2015"],
  "plugins": [
        "transform-es2015-modules-simple-commonjs"
    ]
}

---

isomorphic-fetch

npm install isomorphic-fetch es6-promise --save-dev

fetch API，具体见:
Fetch API
【翻译】这个API很“迷人”——(新的Fetch API)
Redux 中文文档Redux 中文文档也有提到一些

// 在应用中其它任何代码执行前调用一次
import 'babel-polyfill'

// 每次使用 `fetch` 前都这样调用一下
import fetch from 'isomorphic-fetch'

---

babel-polyfill

npm install babel-polyfill --save-dev

话说我也不知道这个是什么鬼，不过上面的isomorphic-fetch需要用到，有人可以补充一下吗？

---

----ES7相关----

babel-plugin-transform-object-rest-spread

npm install babel-plugin-transform-object-rest-spread --save-dev

对象展开运算符object-rest-spread，

要在根目录下创建一个 .babelrc 文件，文件里写下面的内容
{
  "plugins": ["transform-object-rest-spread"]
}

---

----redux相关----

redux-logger

npm install redux-logger --save-dev

这个只是一个记录器中间件，用不用也没所谓

---

----插件plugins----

uuid
npm install uuid --save-dev

生成唯一的id值

---

html-webpack-plugin

npm install html-webpack-plugin --save-dev

1. 功能：帮助生成HTML文件
2. 配置Configuration，可以进行一系列的配置，支持如下的配置信息：

• title: 用来生成页面的 title 元素
• filename: 输出的 HTML 文件名，默认是 index.html, 也可以直接配置带有子目录。
• template: 模板文件路径，支持加载器，比如 html!./index.html
• inject: true | 'head' | 'body' | false ,注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。
• favicon: 添加特定的 favicon 路径到输出的 HTML 文件中。
• minify: {} | false , 传递 html-minifier 选项给 minify 输出
• hash: true | false, 如果为 true, 将添加一个唯一的 webpack 编译 hash 到所有包含的脚本和 CSS 文件，对于解除 cache 很有用。
• cache: true | false，如果为 true, 这是默认值，仅仅在文件修改之后才会发布文件。
• showErrors: true | false, 如果为 true, 这是默认值，错误信息会写入到 HTML 页面中
• chunks: 允许只添加某些块 (比如，仅仅 unit test 块)
• chunksSortMode: 允许控制块在添加到页面之前的排序方式，支持的值：'none' | 'default' | {function}-default:'auto'
• excludeChunks: 允许跳过某些块，(比如，跳过单元测试的块)

1. 详细请看具体内容

---

extract-text-webpack-plugin

npm install extract-text-webpack-plugin --save-dev

独立出css样式
如果我们希望样式通过 <link>引入，而不是放在 <style>标签内，可以使用这个插件

---

babel-plugin-transform-do-expressions

npm install babel-plugin-transform-do-expressions --save-dev

使JSX可以使用 if-else 表达式 ，例如：

{do {
    if (loading) {
        <Loading></Loading>
    } else {
        <Programa items={homePrograma}></Programa>
    }
}}

要在根目录下创建一个 .babelrc 文件，文件里写下面的内容
{
  "plugins": ["transform-do-expressions"]
}

---

open-browser-webpack-plugin

npm install open-browser-webpack-plugin --save-dev

Opens a new browser tab when Webpack loads.
在webpack-dev-server启动时，在浏览器自动打开一个新的页签

---