webpack入门

webpack的优势

1.webpack是以commonJS的形式来书写，但对AMD/CMD的支持也很全面，方便旧项目进行代码迁移。
2.可以对js,css,img进行模块化。
3.开发便捷，能代替grunt/glup的工作，比如打包，压缩，图片转base64。
4.扩展性强，插件机制完善。

阮一峰的教程
http://www.uxebu.com/index.html%3Fp=6615.html
使用方法

使用

 echo  "document.write("It work.")" > entry.js

index.html

然后执行:

webpack ./entry.js bundle.js

2.升级
content.js

module.exports = "It works from content.js.";

update entry.js

document.write(require("./content.js"));

使用loader
webpack can only handle JavaScript natively, so we need the css-loader to process CSS files. We also need thestyle-loader to apply the styles in the CSS file.
update entry.js

require("!style!css!./style.css")

We don’t want to write such long requires require("!style!css!./style.css"); .

require("./style.css")

webpack ./entry.js bundle.js --module-bind 'css=style!css'

3.use config file
add webpack.config.js

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {test: /\.css$/, loader: "style!css"}
        ]
    }
}

执行webpack

webpack常用命令

don't want to manually recompile after every change

webpack --progress --colors --watch

development server

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