webpack的helloworld

参考
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

猜你喜欢