使用webpack 进行ES6开发

dzheng 9年前

来自： https://segmentfault.com/a/1190000004457636

年前摸索着写了一个使用gulp 进行ES6开发 ，今天再摸索着学习一下webpack吧。。

一些题外话

使用 webpack 的初衷其实是想用 React。

学习 React 的时候，始终被一个问题困扰：既然组件已经模块化了，比如一个 jsx 文件对应一个组件，这个文件里包含了这个组件的 html 和 js，但是他的样式该写在哪里呢？看的网上教程都是写在 jsx 文件里，通过变量定义，或者直接就写到全局样式里面去了。通过变量写不能定义伪元素，而且在 js 里这样写一堆样式感觉很难受，但是写在全局又不符合组件化的思想。

查资料的时候发现了一个 css modules 的概念，详细可以参考 这篇文章 。当然css没有原生支持这种概念，但在 webpack 里，通过一个 css-loader 就能轻易使用。另外 webpack+React 也很流行的，于是我就开始学习 webpack 了。

开始

一、创建目录

简单创建目录结构如下：

/es6  -- main.js  -- Person.js  index.html  webpack.config.js

es6 里面存放的是 ES6 风格的代码， main.js 是入口文件， index.html 是首页， webpack.config.js 是 webpack 的配置文件。

二、安装 webpack

首先还是要保证安装了 nodejs，然后通过 npm 安装即可：

npm install webpack -g

三、配置

打开 webpack.config.js ，编辑如下： 

var path = require('path');  module.exports = {    entry: "./es6/main.js",    output: {      path: __dirname,      filename: "bundle.js"    },    module: {      loaders: [        {          test: path.join(__dirname, 'es6'),          loader: 'babel-loader',          query: {            presets: ['es2015']          }        }      ]    }  }

module.exports 导出的对象即是 webpack 的配置对象，其中：

  • entry 是入口文件

  • output 是输出文件，这里的 filename 给的是 bundle.js ，也就是当 webpack 运行完之后将生成一个 bundle.js 文件

  • loaders 是使用到的所有加载器，在 gulp 里面我们都是使用的是 gulp 的一些插件比如 gulp-rename 、 gulp-concat 等等，在 webpack 里面类似，使用的是各种 loaders ，详细的 loaders 列表在 这里 。

更多配置属性的含义在 这里 。

这里使用了一个叫 babel-loader 的加载器，在使用 gulp 进行ES6开发里面有介绍过，我们都是使用 babel 对 ES6 风格的代码进行转换，所以在 query 里面同样使用了 es2015 转码规则。下面就安装这个加载器。

四、安装 loaders

安装 babel-loader

npm install babel-loader --save-dev

安装转码规则

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

至此准备工作已经做完了，下面可以编写代码了。

五、码代码

/es6/main.js

import Person from './Person.js';    let p = new Person('张三', 20);  document.write(p.say());

/es6/Person.js

class Person{    constructor(name, age){      this.name = name;      this.age = age;    }      say(){      return `我是${this.name},我今年${this.age}岁了。`;    }  }    export default Person;

index.html

在这里就可以直接引用 bundle.js 了。 

<!DOCTYPE html>  <html>  <head>    <meta charset="UTF-8">    <title>Document</title>  </head>  <body>    <script src="bundle.js"></script>  </body>  </html>

六、运行

因为有 webpack.config.js 配置文件，所以只需要输入 webpack 就能运行， webpack 会自动去执行配置文件的内容： 

webpack

对于大型项目，可能 webpack 会运行很久，所以可以添加一个进度条便于查看：

webpack --progress --colors

在 gulp 里，使用 watch 可以监视文件的变化，而在 webpack 里，只需加一个参数：

webpack --watch

所以，我们可以使用下面的命令运行：

webpack --progress --colors --watch

就是这么简单！

</div>

相关经验