## 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`。