Webpack

http://hanjianwei.com/2014/09/10/webpack-package-manager-for-web/

getting-started

官方有个教程,还可以,照着做了,有问题 http://webpack.github.io/docs/tutorials/getting-started/

到require那节

+ require("!style!css!./style.css");
  document.write(require("./content.js"));

报错了

bigzhu:/Users/bigzhu/webpack_test/$ webpack ./entry.js bundle.js
Hash: 9f60f1641eaf55cb086a
Version: webpack 1.11.0
Time: 60ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.72 kB       0  ![pic](emitted)  main
   ![pic](0) ./entry.js 65 bytes {0} ![pic](built) [1 error]
   ![pic](1) ./style.css 0 bytes ![pic](built) ![pic](failed)
   ![pic](2) ./content.js 46 bytes {0} ![pic](built)

ERROR in ./style.css
Module parse failed: /Users/bigzhu/webpack_test/style.css Line 1: Unexpected token {
You may need an appropriate loader to handle this file type.
| body {
|     background: yellow;
| }
 @ ./entry.js 1:0-22

找了才知道,依赖两个另外的插件,教程也没有说要安装

npm install style-loader css-loader --save

自动编译到是本身就带了,方便

webpack --progress --colors --watch

还有一个dev server,可以监听变动并刷新浏览器

npm install webpack-dev-server -g
webpack-dev-server --progress --colors

改动后自动编译,并刷新页面

高级使用

建议的目录是这样的

/project
- /app
-- main.js
-- AppComponent.js
- /build
-- index.html
-- bundle.js (automatically built by webpack)
- webpack.config.js

webpack.config.js 是这样的

module.exports = {
  entry: ![pic]('./app/main.js'),
  output: {
    path: './build',
    filename: 'bundle.js'
  }
};

package.json 是这样的

{
  "name": "my-project",
  "version": "0.0.0",
  "main": "app/main.js",
  "scripts": {
    "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
  },
  "author": "",
  "license": "ISC"
}

这样,只要执行npm run dev就可以启动webpack-dev-server了

vuejs和webpack整合