入门
1. 安装环境
sudo npm install webpack -g
2. 基本测试
代码地址https://github.com/mzkmzk/Webpack_Example/tree/master/1-base
entry.js
document.write("It works.");index.html
<html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> </html>- 执行命令:
webpack ./entry.js bundle.js
基本很简单,webpack配置好了基本都OK
3. 引入JS
代码地址https://github.com/mzkmzk/Webpack_Example/tree/master/2-exports_js
- 复制
2. 基本测试 增加
content.jsmodule.exports = "It works from content.js.";修改
entry.js- document.write("It works."); + document.write(require("./content.js"));- `$ webpack ./entry.js bundle.js
这部分使用了exports模块
4. 引入CSS
代码地址https://github.com/mzkmzk/Webpack_Example/tree/master/3-require_css
- copy上一步的代码
npm install css-loader style-loader增加样式
body { background: yellow ; }更新
entry.js+ require("!style!css!./style.css"); document.write(require("./content.js"));webpack ./entry.js bundle.js
5. 命令引入CSS模块
代码路径https://github.com/mzkmzk/Webpack_Example/tree/master/4-require_css_order
- copy上一步代码
修改
entry.js- require("!style!css!./style.css"); + require("./style.css"); document.write(require("./content.js"));- 执行`webpack ./entry.js bundle.js --module-bind 'css=style!css'
6. 引入配置文件
代码地址https://github.com/mzkmzk/Webpack_Example/tree/master/5-config_file
- copy上一步骤嗲吗
新建webpack.config.js
module.exports = { entry: "./entry.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: /\.css$/, loader: "style!css" } ] } };webpack
7. 开启本地Server
- 安装Server:
sudo npm install webpack-dev-server -g弹出警告npm WARN webpack-dev-server@1.14.1 requires a peer of webpack@>=1.3.0 <3 but none was installed. npm WARN webpack-dev-middleware@1.6.1 requires a peer of webpack@1 || ^2.1.0-beta but none was installed. - 开启监听:
webpack-dev-server --progress --colors - 打开:
http://localhost:8080/
8.基本命令
- wepack: 基本打包
- wepack -w: 提供watch
- wepack -p: 打包后文件压缩
- wepack -d 提供SourceMap
- wepack --colors: 结果带彩色,用时久的显示红色
- wepack --profile: 输出性能数据
- wepack --display-modules: 默认
node_modules的模块隐藏,加上这个可以显示 webpack --progress --colors --watch监听变化
参考链接
代码参考:http://webpack.github.io/docs/tutorials/getting-started/