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
<html>
<head></head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</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
网友评论