【译】webpack文档翻译 用法
转载请注明来源(sunshine-boy)
安装
你可以通过npm安装webpack：
npm install webpack -g
入门
首先，我们将通过使用webpack的命令行指令来学习webpack的基础。
创建一个模块化的js项目
一起使用js创建一些模块，使用CommonJs语法：
cats.js
var cats = ['dave', 'henry', 'martha']; module.exports = cats;
app.js(entry point)
cats = require('./cats.js');
console.log(cats);
entry point是你的应用将开始和webpack将追踪模块间依赖的地方。
webpack在5秒之内干了什么
给webpack entry point(app.js)并且定义一个输出文件(app.bundle.js)：：
webpack ./app.js app.bundle.js
webpack将查看和分析entry point和它的依赖(包括依赖里的依赖)。然后它会绑定它们到app.bundle.js里。
现在你的bundle(捆绑)文件可以运行了。运行node app.bundle.js并且惊讶于你丰富的猫。
node app.bundle.js
["dave", "henry", "martha"]
进阶
webpack是一个非常灵活的模块绑定器。它提供非常多高级特性，但不是所有特性通过命令行指令来暴露。为了获得使用webpack灵活性的全部途径，我们需要创建一个“configuration”(配置)文件。
项目结构
在真实的项目里，我们将把bundle(绑定)文件与源文件分开通过组织他们到文件夹里。对于这个例子，我们将把源文件放到src，把bundle文件放到bin。
我们最终的项目结构将变这样：
在其他地方，有非常多项目结构。一些项目使用app来提到src。一些项目使用dist或build来代替bin。测试文件通常使用目录test，tests，spec，specs或把测试文件塞到源文件夹里。
1.创建bin和src目录。
mkdir bin
mkdir src
2.把源文件移到到src文件里。
mv app.js cats.js src
3.初始化一个npm项目。
npm init
(问答一些问题)
4.安装webpack作为development dependency(开发依赖)。这允许你的项目声明它兼容的webpack版本。
npm install --save-dev webpack
移动到配置文件里。
当你的项目成长和你的配置变得越来越复杂，从命令行配置webpack变得毫无边际。一起创建一个配置文件来替代命令行方式。
1.创建 webpack.config.js :
module.exports = { entry: './src/app.js', output: { path: './bin', filename: 'app.bundle.js' } };
webpack配置文件是一个node风格的模块。所以你可以在这里运行任何代码，只要配置对象是这个模块的输出。
2.配置文件放在该放的地方后，你可以简单地运行webpack像这样：
webpack
webpack将读取配置文件，构建bundle，并且把它保存为bin/app.bundle.js。如果你检查下webpack的输出，你将看到它包括两个源文件。
3.运行bin/app.bundle.js，你将再次获得你的猫列表。
node bin/app.bundle.js ["dave", "henry", "martha"]
你也可以require()通过npm安装的其他模块，不需要写额外的配置。
使用loaders
wepback原生只支持js模块，但多数人将使用一个关于ES2015, CoffeeScript, TypeScript，等的transpiler(转译器)。他们可以通过使用“loaders”来在webpack中使用。
loaders是特殊的模块，webpack使用它们把别的模块(用别的语言写的)“加载成”js(webpack能理解的)。例如，babel-loader使用babel来加载es2015文件。
json-loader加载JSON文件(仅仅在前面加上module.exports =来把它转成一个CommonJs模块)。
loader可以被链接，有时候你需要把loader链接在一起。例如，yaml-loader只支持把YAML转换成JSON。因此，你需要把它链接json-loader以至于yaml文件能被当模块用。
使用babel-loader来转译es2015
在这个例子里，我们将告诉webpack通过babel来运行我们的源文件，所以我们可以使用es2015特性。
1.安装babel和presets(译注：转译特定的语言/标准的包)
npm install --save-dev babel-core babel-preset-es2015
2.安装babel-loader
npm install --save-dev babel-loader
3.通过创建.babelrc文件，配置babel，使用这些presets
{ "presets": [ "es2015" ] }
4.修改webpack.config.js，使webpack使用babel-loader来处理所有.js文件。
module.exports = { entry: './src/app.js', output: { path: './bin', filename: 'app.bundle.js', }, module: { loaders: [{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', }] } }
这里，我们exclude(排除) node_modules，因为不这样的话所有的外部文件都将被babel处理，降低了编译速度。
5.安装你想要用的库(在这个例子，是jquery)：
npm install --save jquery babel-polyfill
6.编辑src/app.js：
import 'babel-polyfill'; import cats from './cats'; import $ from 'jquery'; $('<h1>Cats</h1>').appendTo('body'); const ul = $('<ul></ul>').appendTo('body'); for (const cat of cats) { $('<li></li>').text(cat).appendTo(ul); }
7.使用webpack来绑定模块：
webpack
8.添加index.html，所以这个app可以运行：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bin/app.bundle.js" charset="utf-8"></script>
</body>
</html>
当你打开index.html，你应该看到一个猫的列表！
还有很多不同的loaders你可以使用来在你的app bundle里包含文件，包括css和图片loader。
使用插件
通常你想要对bundle做一些额外的处理在你的工作流程里。举例，最小化你的文件以至于客户端加载它更快。这可以通过插件来完成。我们将添加Uglify插件在配置文件里：
const webpack = require('webpack');
module.exports = {
entry: './src/app.js',
output: {
path: './bin',
filename: 'app.bundle.js',
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
}]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
output: {
comments: false,
},
}),
]
}
Uglify插件是webpack自带的，所以你不需要额外的模块，但不是所有插件都是自带的。你可以写你的自定义插件。对于这次构建，Uglify插件把bundle大小从1618字节减少到308字节。
延伸阅读
查看CLI关于命令行指令。
查看nodejs API关于nodejs接口。
查看配置关于配置选项。
posted on 2016-07-02 15:29 sunshine-boy 阅读(249) 评论(1) 收藏 举报
浙公网安备 33010602011771号