更新于 2015 年 / 11 月 / 08 babel 6.0 版本
仅仅是一个开发工具包? 克隆压缩 https://github.com/jamesknelson/webpack-black-triangle 或是 Unicorn Standard Starter Kit http://unicornstandard.com/packages/boilerplate.html 的工作原理
从 ES2015 到 es2016 已实现了大量压缩, 并加入了很棒的特性, 事实上, 使用它并不能帮助你太多. 问题是, 虽然 ES6 是趋势, 但是浏览器仍然停留在过去. 想要验证的话, 在 Chrome 浏览器控制台输入箭头函数, 它将提示你:
当然, 原因不仅如此, 现在大多数浏览器都支持 ES6, 但有一个问题: 你需要一个 build 的过程. 虽然这在过去有很多阻碍, 但现在未必如此.
Build 不在意味着是 300 行的配置文件
在过去几年, 也有很多关于 Javascript 的构建工具. webpack 的突然出现, 不在需要我们处理冗长且复杂的 Gulpfiles 和 Gruntfiles.
Webpack 让我们不需要在做很多事, 例如, 无论是 github 项目中的配置文件, webpack 如何使用 Babel 转译 ES6, 编译 LESS , 还是文件修改, 重新加载页面都只是 26 行代码.
/u/nickguletskii200 http://www.reddit.com/user/nickguletskii200 这个网站曾提到
> Webpack 是我用过的编译 JS 的最快的软件.
根据这些, 我最近选择 webpack 构建 http://www.memamug.com 的系统, 小的 open-source https://github.com/jamesknelson/memamug-client app, 前端是基于 React-based 的. 考虑到 webpack 最大的问题是缺乏文档, 我将会带你了解整个过程
用代码测试 build 项目
在开始之前, 我们需要运行一些 ES6 代码在我们的构建的项目中, 我为了你们精心设计了一个项目 black triangle https://gist.github.com/jamesknelson/9b7db05268e747b4aa4d , 开始运行, 它就会开始旋转.
在 build 项目之前, 我们先给代码建个目录, 并在浏览器运行它. 首先, 将代码复制在一个新的文件夹中, 或者从 git 上克隆.
$ git clone https://gist.github.com/9b7db05268e747b4aa4d.git black-triangle
假设现在已经有了 black-triangle 目录, 进入, 将源文件移到该目录中, 并对它进行更改.
- $ cd black-triangle
- $ mkdir src
- $ mv index.html main.js BlackTriangle.js src
在浏览器中运行 index.html, 正常情况你会看到一个 (不可移动的) 黑色三角形, 像下图这样
最小可行的 Webpack
当然这不是一篇关于黑色三角形的博客, 而且关于 webpack&& Babel, 可以像下面那样, 用 node 创建
- $ npm install webpack-dev-server -g
- $ npm install webpack-dev-server webpack babel-core babel-loader babel-preset-es2015 babel-polyfill
完成后, 在 black-triangle 目录下启动服务, 执行 webpack-dev-server 命令 加上 HTML 的路径和 JavaScript 的入口文件(如 src/main.js)
$ webpack-dev-server --content-base src src/main.js
在 http://localhost:8080/ 打开项目, webpack 被 ES6 阻塞, 我们仍然看到一个不动的黑色三角形, 是什么原因呢?
配置 Webpack
虽然我们已经安装了所有 webpack 解析 ES6 所需的包, 但是我们仍然需要告诉它如何做到这一点. 我们需要有个 webpack 的配置文件 webpack.config.js 这个文件将包含我们整个项目的权限
为了使三角形旋转, 在你的 black-triangle 目录下添加 webpack.config.js 文件, 内容如下. 然后重启 webpack-dev-server 服务, 并重新加载页面, 现不需要关心它是如何实现的, 下面我会提到
- var path = require('path');
- var webpack = require('webpack');
- module.exports = {
- entry: [
- 'babel-polyfill',
- './src/main'
- ],
- output: {
- publicPath: '/',
- filename: 'main.js'
- },
- devtool: 'source-map',
- module: {
- loaders: [
- {
- test: /\.js$/,
- include: path.join(__dirname, 'src'),
- loader: 'babel-loader',
- query: {
- presets: ["es2015"],
- }
- }
- ]
- },
- debug: true
- };
想要停止 webpack-dev-server 服务, ctrl-c (对于 mac).
文件改变时不需要重启服务 webpack.config.js 就会重新刷新页面.
你的三角形旋转了吗? 如果没有, 请留言我将会帮助你. 让我们来快速浏览下配置文件.
webpack.config.js 的两部分
第一 关于文件本身
webpack.config.js 是 node 生成的正常的 JavaScript 文件,
你可以用 node 引入模块, 来检查环境变量
Webpack's 配置对象中以文件导出, 需要的时 module.exports 引入
接下来是, 关于我们在配置对象中的 key 值
entry 是一个数组, 包括 JavaScript 的主文件, 之前还需要一个 babel-polyfill
output 是 webpack-dev-server 提供编译后 main.js 的文件, 为浏览器提供入口.
devtool 告诉 webpack 要自动为我们提供源文件, 这样浏览器就可以在他们的开发控制台中显示原始的文件(而不是编译的文件).
module.loaders 是 https://github.com/webpack/docs/wiki/list-of-loaders 的目录, 包括我们的编译源. 通过 babel-loader 告诉 webpack 运行 src 目录下面的 .js 的文件, 使用 es2015 插件将 es2015(即 ES6)转换为 ES5.
debug 是作为 loader 中的一个调试模式选项
如果你还想了解一些关于 webpack 配置的, 可以参考网上这篇文章 documentation http://webpack.github.io/docs/configuration.html 它并不是关于 webpack 配置的要点, 因此, 不必要的时候不需要阅读
概括起来, 你还需要知道:
entry 是脚本的入口位置
module.loaders 是放你编译代码的地方
和往常一样, 也有例外: 插件配置选项只在你需要部署的时候有用. 我将在以后的指南中解释如何用插件实现最小化之类的功能, 为了不错过需要加我的邮件. 我将用免费提供 ES6 cheatsheet 的最佳期刊作为你发来邮件的回报! 但是现在, 让我们在给 webpack 配置加一些调整来结束.
获取 ES6 Cheatsheet
感谢! 请检查你的邮件中的 cheatsheets 链接
提示订阅的错误请重试
名
邮件地址
订阅我的简讯
让你的生活更轻松
1. 保存后自动重新加载页面
使用 webpack-dev-server 最大的优势是当文件发生改变它就通知浏览器. 当然, 如果你不监听这些通知也不会发生什么. 但幸运的是 webpack-dev-server 包含一个方便且完备的脚本, 当监听到通知的时候, 将会为你重新加载页面.
关于脚本'webpack-dev-server/client?http://localhost:8080'(http://localhost:8080'))的问题 http://localhost:8080'(http://localhost:8080' )的问题). 为什么不试着根据你在上面学到的东西自己添加它呢? 完成后, touch 或 hover 在下面的空白框上, 以获得答案.
- entry: [
- 'babel-polyfill',
- './src/main',
- 'webpack-dev-server/client?http://localhost:8080'
- ],
2. webpack-dev-server 的默认选项
当你想启动服务的时候输入并执行以下命令
$ webpack-dev-server --content-base src src/main.js
幸运的是, 你可以通过在 webpack.config.js 添加 devServer 对象在中, 来指定 webpack-dev-server 的默认选项. 这个对象中的 key 值, 是那些您驼峰命名实现版本控制.
如果这有点拗口, 别担心 -- 你只需要知道你应该把这个添加到你的 webpack.config.js:
- devServer: {
- contentBase: "./src"
- }
然后您可以从上面的命令中省略 - content-base 的 src.
3. 使用 package.json 记录依赖项和入口点
如果你知道 package.json 的工作原理, 你可以跳过这部分.
最后一步是创建一个 package.json, 使用它有很多很好的理由, 我不能一一列举, 但这里有两个相关的理由:
你可以添加依赖(如. webpack & babel), 用 npm install 安装他们
你可以定义一个起始脚本, 这样你就不需要记住 webpack-dev-server 使用 npm start 即可
创建 package.json 是如此的简单, 你没有理由不去做它, 因此, 现在让我们在你的 black-triangle 目录中创建它, 方式如下
npm init
现在按照提示输入 src/main. 作为你的入口点
现你已有属于你自己的 package.json, 如此的简单. 让我们通过告诉 npm, 当我们输入 npm start 后应该做什么来结束它: 在 package.json 脚本文件中生成新的对象 key, 如下:
"start": "node_modules/webpack-dev-server/bin/webpack-dev-server.js"
最后, 关闭当前服务 (如果服务运行) 输入 npm start 并查看 http://localhost:8080/ 来测试
通过输入 npm start 重新加载服务, 如此简单的实现编译 ES6
但是现在不要关闭标签. 读过这篇文章后, 你需要记住重要的部分, 还有什么比做一个有用的练习更好的方法.
练习: 编译并监听 LESS/SCSS 文件
这个练习范围小, 但是结果显著. 它只需要在 webpack.config 中添加两行 js, 当你将更改保存. less 或. scss 时, 你会立即得到浏览器样式表的即时更新.
开始之前, 你需要装一些依赖包
npm install style-loader autoprefixer-loader css-loader less-loader --save-dev
如果是这样情况, 可以用 less-loader 代替 scss-loader
一旦包已经安装, 你需要对 webpack.config.js 进行两处改变
将新的 loaders 添加到 module.loaders 部分中的. less 或. css 行中. 使用! 使 loaders 相互连接的字符(更多参考文章( http://webpack.github.io/docs/loaders.html ) )
在 entry 中添加新的 stylesheet(是的, 你可以在 webpack 中包含更多的 JavaScript)
测试时, 不要忘记在 index.html 中移出样式
确保你不会在这个练习中陷入困境 -- 在 10 分钟左右的时间里, 你可以自由地离开. 重要的是你要试一试. 你一旦尝试, 你可以看看我的解决方案, 以及我是如何将整个项目连接在一起的,( https://github.com/jamesknelson/webpack-black-triangle ).
如何配置 app 来进行部署?
首先, 要把它进行压缩. 然后, 您可能引入一些环境变量, 以便在开发和生产中设置不同的 API 键. 你需要提取 CSS 作为一个分开的文件, 并进行缓存. 这需要一些方法来修改你的 src 属性
来源: https://juejin.im/entry/5b6199bce51d451a244c07a1