http://www.jianshu.com/p/42e11515c10f#
一。基本使用
npm install -g webpack
或
npm install --save-dev webpack
npm init
初始化package.json
mkdir app
mkdir public
vim app/Greeter.js
module.exports = function() { var greet = document.createElement('div'); greet.textContent = "Hi there and greetings!"; return greet; };
vim main.js
var greeter = require('./Greeter.js'); document.getElementById('root').appendChild(greeter());
vim public/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Webpack Sample Project</title> </head> <body> <div id='root'> </div> <script src="bundle.js"></script> </body> </html>
生成bundle文件
webpack app/main.js public/bundle.js [root@mcon xuexi]# tree . ├── app │ ├── Greeter.js │ └── main.js ├── package.json └── public ├── bundle.js └── index.html 2 directories, 5 files [root@mcon xuexi]#
二。使用npm start 把webpack的命令包含到package.json
vim package.json
[root@mcon xuexi]# cat package.json { "name": "xuexi", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "webpack": "^1.13.3" }, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" ,"start": "webpack" ,"haoning:":"webpack" }, "author": "", "license": "ISC" }
只增加了一行
,"start": "webpack"
npm start app/main.js public/bundle.js
或
npm run
如果对应的此脚本名称不是start,想要在命令行中运行时,需要这样用npm run {script name}如npm run haha,以下是执行npm start后命令行的输出显示
"scripts": { "test": "echo \"Error: no test specified\" && exit 1" ,"haha":"webpack" },
npm run haha app/main.js public/b.js
三.生成Source Maps 使调试更容易
把后两个参数去掉
vim webpack.config.js
module.exports = { devtool: 'eval-source-map',//配置生成Source Maps,选择合适的选项 entry: __dirname + "/app/main.js", output: { path: __dirname + "/public", filename: "bundle.js" } }
四.loader
vim app/config.json
{ "greetText": "Hi there and greetings from JSON!" }
vim app/Greeter.js
var config = require('./config.json'); module.exports = function() { var greet = document.createElement('div'); greet.textContent = config.greetText; return greet; };
[root@mcon xuexi]# ls
app node_modules package.json public webpack.config.js
[root@mcon xuexi]#
vim webpack.config.js
module.exports = { devtool: 'eval-source-map', entry: __dirname + "/app/main.js", output: { path: __dirname + "/public", filename: "bundle.js" }, module: {//在配置文件里添加JSON loader loaders: [ { test: /\.json$/, loader: "json" } ] }, devServer: { contentBase: "./public", colors: true, historyApiFallback: true, inline: true } } ~
npm install --save-dev webpack-dev-server
npm install --save-dev json-loader
会自动修改package.json
{ "name": "xuexi", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "webpack": "^1.13.3" }, "devDependencies": { "json-loader": "^0.5.4", "webpack-dev-server": "^1.16.2" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "haha": "webpack" }, "author": "", "license": "ISC" }
npm run haha