Webpack是模块打包工具。http://www.tuicool.com/articles/mIRnEjU
本文面向刚刚接触Webpack的初学者，主要介绍Webpack的初始设置和配置、模板、加载程序、插件、代码拆分和热模块替换。如果你发现视频教程对你更有帮助，我强烈推荐Glen Maddern’s的 Webpack from First Principles 作为一个起点，了解是什么使得Webpack那么特别。
接下来，你需要有 Node.js installed 环境，你也可以 download the demo app from our Github repo
让我们用 npm 新建一个项目并初始化，安装 Webpack :
mkdir webpack-demo cd webpack-demo npm init -y npm install webpack@beta –save-dev mkdir src touch index.html src/app.js webpack.config.js编辑这些文件：
<!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Hello webpack</title> </head> <body> <div id="root"></div> <script src="dist/bundle.js"></script> </body> </html> // src/app.js const root = document.querySelector('#root') root.innerHTML = `<p>Hello webpack.</p>` // webpack.config.js const webpack = require('webpack') const path = require('path') const config = { context: path.resolve(__dirname, 'src'), entry: './app.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [{ test: /\.js$/, include: path.resolve(__dirname, 'src'), use: [{ loader: 'babel-loader', options: { presets: [ ['es2015', { modules: false }] ] } }] }] } } module.exports = config上面的配置是一个常见的起点，它指示 webpack 将我们的入口点 src/app.js 编译输出到 /dist/bundle.js 中，所有的 .js 文件将通过 Babel 从 ES2015 转换到 ES5 。
为了让它运行，我们需要安装三个包： babel-core ， Webpack 模块和资源转换器—— babel-loader 和预设的 babel-preset-es2015 。
{ modules: false } 启用 Tree Shaking 把我们包中不被使用的输出删除，从而降低文件大小。
npm install babel-core babel-loader babel-preset-es2015 --save-dev最后，将 package.json 文件中的 script 部分替换为：
"scripts": { "start": "webpack --watch", "build": "webpack -p" },在命令行中运行 npm start 来监视模式启动 webpack ——每当我们 src 目录中的 .js 文件更改时，都会重新编译输出到 bundle 中。控制台中的输出会告诉我们正在创建的包，重要的是要注意包的数量和大小。
现在你应该可以在浏览器中加载 index.html ，并使用“Hello webpack”。
open index.html打开 dist/bundle.js 查看 webpack 做了什么，顶部是 webpack 的模板引导代码，底部是我们的模板。也许你对这不会有很深刻的印象，但如果你跟着进度学到了这里，你可以运用 ES6 module 和 webpack 生产一个能在所有浏览器中运行的用于生产的包。
输入命令行 Ctrl + C 停止 webpack ，并运行 npm run build 用于在生产模式下编译我们的包。
请注意，此时包的大小已经从2.16kB下降到585字节。
再查看一下 dist/bundle.js ，你会看到一个丑恶的代码，我们的包已经压缩或丑化（uglify/minify），代码运行效果是一样的，但它并不符合最少字符需要。
开箱即用的 webpack 知道如何使用各种格式的JavaScript模块，最显著的两种是：
ES2015的 import 语句
CommonJS的 require() 语句
我们可以通过安装 lodash 并从 app.js 导入它来测试一下：
npm install lodash --save // src/app.js import {groupBy} from 'lodash/collection' const people = [{ manager: 'Jen', name: 'Bob' }, { manager: 'Jen', name: 'Sue' }, { manager: 'Bob', name: 'Shirley' }, { manager: 'Bob', name: 'Terrence' }] const managerGroups = groupBy(people, 'manager') const root = document.querySelector('#root') root.innerHTML = `<pre>${JSON.stringify(managerGroups, null, 2)}</pre>`运行 npm start 启动 webpack ，刷新一下 index.html 页面，你可以看到按 manager 排序的人数组。
让我们来把 people 数组移动到自己的 people.js 文件中：
// src/people.js const people = [{ manager: 'Jen', name: 'Bob' }, { manager: 'Jen', name: 'Sue' }, { manager: 'Bob', name: 'Shirley' }, { manager: 'Bob', name: 'Terrence' }] export default people我们可以使用相对路径简单地从 app.js 导入它。
// src/app.js import {groupBy} from 'lodash/collection' import people from './people' const managerGroups = groupBy(people, 'manager') const root = document.querySelector('#root') root.innerHTML = `<pre>${JSON.stringify(managerGroups, null, 2)}</pre>`注意：没有相对路径的导入，如 lodash/collection 是从 npm 安装到 node_modules 的模块，自己写的模块是需要加一个相对路径,如 ./people 来告诉 webpack 区分好各个模块。
我们已经介绍了 babel-loader ——很多 loders 之一，通过配置用于告诉 webpack 当遇到不同文件类型的 import 时要怎么做。你可以把过个 loader 整合在一起，我们可以通过从 JavaScript 中导入 Sass 来很好地了解这是如何工作的。
这种转换涉及到三个独立的 loader 和 node-sass 库：
npm install css-loader style-loader sass-loader node-sass --save-dev在 webpack.config.js 中给我们的 .scss 文件添加新的配置规则：
// webpack.config.js rules: [{ test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ] }, { // ... }]注意：每次更改 webpack.config.js 中的任何规则时，都需要使用 Ctrl+C 和 npm start 命令重新启动项目。
loader 数组会以相反的顺序执行：
sass-loader 把Sass转换成CSS
css-loader 把CSS解析到JavaScript中，并分解所有的依赖关系
style-loader 把我们的CSS输出到文档中的<style>标签中
你可以把它当做函数调用，一个 loader 的输出会作为 input 输入下一个。
styleLoader(cssLoader(sassLoader('source')))让我们来添加一个Sass源文件：
/* src/style.scss */ $bluegrey: #2B3A42; pre { padding: 20px; background: $bluegrey; color: #dedede; text-shadow: 0 1px 1px rgba(#000, .5); }你现在可以从JavaScript中直接请求Sass，从 app.js 的头部引入：
// src/app.js import './style.scss' // ...刷新一下 index.html 你就会看到刚添加的样式了。
我们刚刚从JavaScript中导入了Sass文件，作为一个模块。
打开 dist/bundle.js 文件并搜索 “pre { 。事实上，我们的Sass已经被编译成一个CSS字符串，并保存为我们的 bundle 中的一个模板。当我们在JavaScript中导入此模板时， style-loader 会将该字符串输出到嵌入的 <style> 标签中。
我知道你肯定是在想，为什么会这样？
我不会在这里深入讨论这个话题，但是你可以从以下几个方面考虑：
你可能希望包含在项目中的JavaScript组件依赖于其他资源（HTML、CSS、Images、SVG）来正常运行，如果这些资源可以整合在一起，那么导入和使用就会容易很多。
消除死代码：当JS代码不需要导入JS组件时，将不再导入CSS，生成的 bundle 只会包含执行某些操作的代码。
CSS模块：CSS的全局命名空间使得开发者很难确信CSS的一个更改不会产生任何的副作用。CSS modules 通过在默认情况下使CSS local和暴露在JavaScript下使用的唯一类名来改变这一问题。
通过巧妙的方法打包/拆分代码，来较少HTTP请求数量。
我们能够看到的最后一个关于 loader 的例子是使用 url-loader 处理图片。
在标准的HTML文档中，当浏览器遇到一个 <img> 标签或 background-image 属性时会抓取图片。使用webpack，当遇到小图片的时候，你可以通过将图片源作为字符串存储在JavaScript中来优化小图片，这样，你预加载它们，浏览器就不用为了提取它们而发起单独的请求了。
npm install file-loader url-loader --save-dev添加一个加载图片的规则：
// webpack.config.js rules: [{ test: /\.(png|jpg)$/, use: [{ loader: 'url-loader', options: { limit: 10000 } // Convert images < 10k to base64 strings }] }, { // ... }]重新运行项目： Ctrl + C 和 npm start
使用下面命令下载 test image
curl https://raw.githubusercontent.com/sitepoint-editors/webpack-demo/master/src/code.png --output src/code.png你现在可以在 app.js 的头部导入图片源：
// src/app.js import codeURL from './code.png' const img = document.createElement('img') img.src = codeURL img.style.backgroundColor = "#2B3A42" img.style.padding = "20px" img.width = 32 document.body.appendChild(img) // ...这将包括一张图片，其中 src 属性包含图片本身的 data URL :
<img src="data:image/png;base64,iVBO..." style="background: #2B3A42; padding: 20px" width="32">此外，由于使用 url() 引用的 css-loader 图片也通过 url-loader 运行，这就好像直接在CSS中嵌入它们。
/* src/style.scss */ pre { background: $bluegrey url('code.png') no-repeat center center / 32px 32px; }编译成为：
pre { background: #2b3a42 url("data:image/png;base64,iVBO...") no-repeat scroll center center / 32px 32px; }你现在应该可以看到 loders 是如何帮助在资源间建立一个依赖关系树的，这是webpack首页上的图片展示：
尽管JavaScript是入口点，但webpack注意到你的其他资源（如HTML、CSS和SVG）都具有各自的依赖关系——这些依赖关系是应该视为构建过程的一部分的。
作者： Mark Brown
原文链接： A Beginner’s Guide to Webpack 2 and Module Bundling
