changer

webpack在es6和less自动更新上的简单构建

原文链接: jamesknelson.com

更新于2015年/11月/08 babel 6.0版本

仅仅是一个开发工具包?克隆压缩 webpack-black-triangle 或是 Unicorn Standard Starter Kit的工作原理

从ES2015 到es2016 已实现了大量压缩,并加入了很棒的特性,事实上,使用它并不能帮助你太多。问题是,虽然ES6是趋势,但是浏览器仍然停留在过去。想要验证的话,在Chrome浏览器控制台输入箭头函数,它将提示你:

Chrome being stuck in the present

当然,原因不仅如此,现在大多数浏览器都支持ES6,但有一个问题:你需要一个build 的过程。虽然这在过去有很多阻碍,但现在未必如此。

Build 不在意味着是300行的配置文件

在过去几年,也有很多关于Javascript的构建工具。webpack的突然出现,不在需要我们处理冗长且复杂的Gulpfiles和Gruntfiles。

Webpack让我们不需要在做很多事,例如,无论是github项目中的配置文件,webpack如何使用Babel转译ES6,编译LESS ,还是文件修改,重新加载页面都只是26行代码。

/u/nickguletskii200 这个网站曾提到

> Webpack是我用过的编译JS的最快的软件。

根据这些,我最近选择webpack构建memamug.com的系统,小的open-source app,前端是基于React-based的。考虑到webpack最大的问题是缺乏文档,我将会带你了解整个过程

用代码测试build项目

在开始之前,我们需要运行一些ES6代码在我们的构建的项目中,我为了你们精心设计了一个项目 black triangle,开始运行,它就会开始旋转。

在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,正常情况你会看到一个(不可移动的)黑色三角形,像下图这样

title

最小可行的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


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 是 loaders 的目录,包括我们的编译源.通过babel-loader 告诉webpack 运行src目录下面的 .js 的文件,使用es2015插件将es2015(即ES6)转换为ES5。

  • debug是作为loader中的一个调试模式选项

如果你还想了解一些关于webpack配置的,可以参考网上这篇文章 documentation 它并不是关于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'))的问题)的问题). 为什么不试着根据你在上面学到的东西自己添加它呢?完成后,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并查看 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属性