使用webpack 进行ES6开发
脚本宝典收集整理的这篇文章主要介绍了使用webpack 进行ES6开发，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
年前摸索着写了一个 使用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.jses6 里面存放的是 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
就是这么简单！
脚本宝典总结
以上是脚本宝典为你收集整理的使用webpack 进行ES6开发全部内容，希望文章能够帮你解决使用webpack 进行ES6开发所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
- vuex 基本入门和使用（二） 2019-08-19
- 默认参数如何在JavaScript ES6中工作 2018-11-14
- JavaScript ES6功能：好的部件 2018-11-14
- 如何使用ES6箭头函数使您的JavaScript更易于阅读 2018-11-14
- 如何使用ES6在JavaScript中有条件地构建对象 2018-11-14
- 关于如何使用Fetch API执行HTTP请求的实用ES6指南示例代码 2018-11-14
- 5个在ES6中修复的JavaScript“坏”的部分 2018-11-13
- 分享干货ECMAScript 2015（ES6）提示和技巧非常有用 2018-11-13
- JavaScript ES6 - 写得少，做得更多 write less, do more 2018-11-13
- 什么时候（和为什么）你应该使用ES6箭头功能 - 何时不应该使用ES6箭头功能 2018-11-12