webpack的helloworld-优快云博客

本文链接：https://blog.youkuaiyun.com/leafrenchleaf/article/details/84824522

参考
[url]http://www.jianshu.com/p/42e11515c10f#[/url]

一。基本使用
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文件
[code="java"]
webpack app/main.js public/bundle.js

# tree
.
├── app
│ ├── Greeter.js
│ └── main.js
├── package.json
└── public
├── bundle.js
└── index.html

2 directories, 5 files
#
[/code]
二。使用npm start 把webpack的命令包含到package.json

vim package.json
[code="java"]
# 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"
}
[/code]
只增加了一行
,"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;
};

# ls
app node_modules package.json public webpack.config.js
#

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