Welcome

安装webpack
使用 webpack
使用 loaders
使用开发服务器

安装 webpack

你需要先安装了 node.js 。

设置 compilation

新建一个文件夹.

创建几个文件:

<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

这样就会将你的文件编译成一个bundlejs.

如果成功显示如下:

Version: webpack 1.12.11
Time: 51ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 28 bytes [rendered]

浏览器打开 index.html . 应该展示 It works.

第二个文件

我们将抽象一些代码带另外一个文件

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

然后:

$ webpack ./entry.js bundle.js

刷新浏览器你将看到 It works from content.js..

The first loader

我们想要添加一个css文件到我们的应用里面。
webpack 默认只处理js，我们需要添加css-loader来处理css文件

webpack can only handle JavaScript natively, so we need the css-loader to process CSS files. We also need the style-loader to apply the styles in the CSS file.

Run npm install css-loader style-loader to install the loaders. (They need to be installed locally, without -g) This will create a node_modules folder for you, in which the loaders will live.

Let’s use them:

### add style.css

body {
background: yellow;
}

### update entry.js

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

Recompile and update your browser to see your application with yellow background.

绑定loader

我们一般不会想写着么长的字段来require require(<span class="string">"!style!css!./style.css"</span>);.

如果我们给loader 绑定了扩展名解下来我们只需要这样: require(<span class="string">"./style.css"</span>)


  document.write(require("./content.js"));

Run the compilation with:

webpack ./entry.js bundle.js --module-bind 'css=style!css'

Some environments may require double quotes: –module-bind “css=style!css”

You should see the same result:

A config file

### add webpack.config.js

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

Now we can just run:

to compile:

Version: webpack 1.12.11
Time: 379ms
    Asset     Size  Chunks             Chunk Names
bundle.js  10.7 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 8.86 kB [rendered]
    [0] ./tutorials/getting-started/config-file/entry.js 65 bytes {0} [built]
    [1] ./tutorials/getting-started/config-file/style.css 943 bytes {0} [built]
    [2] ../~/css-loader!./tutorials/getting-started/config-file/style.css 201 bytes {0} [built]
    [3] ../~/css-loader/lib/css-base.js 1.51 kB {0} [built]
    [4] ../~/style-loader/addStyles.js 6.09 kB {0} [built]
    [5] ./tutorials/getting-started/config-file/content.js 45 bytes {0} [built]

A prettier output

If the project grows the compilation may take a bit longer. So we want to display some kind of progress bar. And we want colors…

We can achieve this with

webpack --progress --colors

Watch mode

We don’t want to manually recompile after every change…

webpack --progress --colors --watch

Webpack can cache unchanged modules and output files between compilations.

When using watch mode, webpack installs file watchers to all files, which were used in the compilation process. If any change is detected, it’ll run the compilation again. When caching is enabled, webpack keeps each module in memory and will reuse it if it isn’t changed.

Development server

The development server is even better.

npm install webpack-dev-server -g
webpack-dev-server --progress --colors

This binds a small express server on localhost:8080 which serves your static assets as well as the bundle (compiled automatically). It automatically updates the browser page when a bundle is recompiled (SockJS). Open in your browser.

开始