• 关于文档
• 1. 概览
• 1. 开始
  • 2.1. 动机
  • 2.2. webpack是什么
  • 2.3. 安装
  • 2.4. 用法
  • 2.5. Require Modules
  • 2.6. Vendor Modules
  • 2.7. 使用 Loaders
  • 2.8. 使用 Plugins
  • 2.9. 工具
  • 2.10. 故障处理
• 1. 教程与例子
  • 3.1. 开始
  • 3.2. 教程列表
  • 3.3. 示例
• 1. 指南
  • 4.1. CommonJs
  • 4.2. AMD
  • 4.3. 对于browserify用户
  • 4.4. 代码拆分
  • 4.5. Stylesheets
  • 4.6. 性能优化
  • 4.7. 长期缓存
  • 4.8. 如何编写loader
  • 4.9. 如何编写插件
  • 4.10. 多入口点
  • 4.11. 库和扩展
  • 4.12. Shimming modules
  • 4.13. 测试
  • 4.14. 构建性能
  • 4.15. 热替换
  • 4.16. Comparison
• 1. webpack with
  • 5.1. grunt | Usage with grunt
  • 5.2. gulp | 使用gulp
  • 5.3. bower | Usage with bower
  • 5.4. karma | Usage with karma
• 1. Lists
  • 6.1. loader conventions
  • 6.2. List of loaders
  • 6.3. List of plugins
  • 6.4. List of hints
  • 6.5. 配置
  • 6.6. CLI
  • 6.7. Node.js API
  • 6.8. API in modules
  • 6.9. Loaders
  • 6.10. Plugins
  • 6.11. Context
  • 6.12. Resolving
  • 6.13. Hot Module Replacement
  • 6.14. Dev Tools
    • 6.14.1. webpack-dev-server
    • 6.14.2. webpack-dev-middleware
• 1. Development
  • 7.1. Changelog
  • 7.2. Roadmap
  • 7.3. Ideas
  • 7.4. Contributing
• Published with GitBook

webpack doc

两个途径来做测试:

• 浏览器: You get a more realistic test, but you need some more complex infrastructure and the test usually take longer. You can test DOM access.
• Node: You cannot test DOM access, but testing is usually faster.

浏览器端 测试

mocha-loader

The mocha-loader executes your code with the mocha framework. If you run the code it'll show the results in the web page.

Hint: when using ! in the bash command line, you must escape it by prepending a \

webpack 'mocha!./test.js' testBundle.js
# index.html is a HTML page which loads testBundle.js
open index.html

webpack-dev-server

The webpack-dev-server will automatically create a HTML page which loads the script. It also re-executes the tests when files have changed.

webpack-dev-server 'mocha!./test.js' --hot --inline --output-filename test.js
open http://localhost:8080/test

Hint: Use --hot and it'll only execute tests which have changed or have changed dependencies.

karma and webpack

You can use webpack with karma. Add "webpack" as preprocessor to your karma config.

node.js 测试

CommonJs only

If you write your web app only in CommonJs and don't use loaders or other webpack-specific features, you can test it in node.js. Just use a node.js testing framework, i. e. mocha.

mocha test/*

Compile and test

If you use webpack-specific features it may not be possible to run the code with node.js. webpack allows to configure a target system: i. e. you can compile code so that it can run in node.js (configuration option target: "node"). Then use a node.js testing framework to run the bundle.

webpack test.js /tmp/testBundle.js --target node
mocha /tmp/testBundle.js

Hint: You can use the null-loader for stylesheets instead of the style-loader!css-loader. style-loader doesn't work in node.js as it requires a DOM.

To make debugging tests easier, you can add source map support using node-source-map-support:

webpack test.js /tmp/testBundle.js --target node
mocha --require source-map-support/register /tmp/testBundle.js

Make sure to configure the devtool option to output the source map.

require增强

TODO