🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 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`。