## JS和JSON处理
webpack 默认支持 js 和 json 的处理,不需要额外的 loader 进行处理。
ES2015 中的 import 和 export 语句已经被标准化。虽然大多数浏览器还无法支持它们,但是 webpack 却能够提供开箱即用般的支持。
事实上,webpack 在幕后会将代码“转译”,以便旧有浏览器可以执行。如果你检查 dist/bundle.js,你可以看到 webpack 具体如何实现,这是独创精巧的设计!除了 import 和 export,webpack 还能够很好地支持多种其他模块语法,更多信息请查看模块 API。
注意,webpack 不会更改代码中除 import 和 export 语句以外的部分。如果你在使用其它 ES2015 特性,请确保你在 webpack 的 loader 系统中使用了一个像是 Babel 或 Bublé 的转译器。
比如:
在 `conf/webpack.config.js` 中配置:
```js
const config = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, '..', 'dist'),
filename: 'main.bundle.js'
}
};
```
在 `src/main.js` 中:
```js
import _ from 'lodash';
import json from './test.json'
let text = _.join(['Hello', 'webpack'], ' ');
console.log(text)
console.log(json)
```
注意这里用到的 lodash 需要先安装 `yarn add lodash`
在 `src/test.json` 中:
```json
{
"name": "quanzaiyu",
"age": 22
}
```
在 `index.html` 中:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='./dist/main.bundle.js'></script>
</head>
<body>
</body>
</html>
```
打包后,打开 `index.html` 可以看到控制台已经输出 `Hello webpack`。