WEBPACK开始

这是一个非常简单的例子，通过这个例子你将学习到

1、How to install webpack

2、How to use webpack

3、How to use loaders

4、How to use the development server

使用node安装

$ npm install webpack -g

创建一个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

它将会编译文件并创建一个bundle.js文件

接下来我们创建第二个文件content.js

module.exports = "It works from content.js.";

更新entry.js

- document.write("It works.");
+ document.write(require("./content.js"));

然后再次编译

$ webpack ./entry.js bundle.js

第一个loader

webpack只能处理JavaScript本身，所以我们需要css-loader来处理css

npm install css-loader style-loader

执行完之后会创建一个node_modules 文件

然后我们创建一个style.css

body {
    background: yellow;
}

更新entry.js

+ require("!style!css!./style.css");
  document.write(require("./content.js"));

然后编译，刷新浏览器，看背景颜色是否为yellow

一个配置文件webpack.config.js

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /.css$/, loader: "style!css" }
        ]
    }
};

这时候只要运行

webpack

如果项目编译时，可能需要一段时间，这时候可以显示进度条和颜色

webpack --progress --colors

我们不想每次修改后手动编译

webpack --progress --colors --watch

开发服务器

npm install webpack-dev-server -g

然后运行

webpack-dev-server --progress --colors

访问 http://localhost:8080/　　　　