webpack 学习笔记 02 快速入门

时间 2019-11-29

标签 webpack 学习笔记快速入门繁體版

原文原文链接

webpack 的目标

将依赖项分块，按需加载。
减小web app的初始加载时间。
使每个静态集合都可以做为组件使用。
有能力集成第三方库，做为组件使用。
高度可配置化。
适用于大型项目。

INSTALLING WEBPACK

在已安装node.js的状况下，输入如下命令行：javascript

npm install webpack -g

SETUP THE COMPILATION

建立一个空的文件夹，分别建立如下文件：css

entry.js
index.htmlhtml

js中写入以下内容：java

document.write("webpack works.");

html内容以下：node

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

在控制台中，咱们运行以下指令：webpack

webpack ./entry.js bundle.js

webpack将会编译，生成捆绑文件。结果以下：
程序员

MUTI FILE

让咱们再增长一个js，如下是文件名与内容web

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

很是典型的CommonJs式的代码，对吧。
修改entry.js的内容app

去掉 document.write("It works.");
增长 document.write(require("./content.js"));

从新运行编译指令，就能够在本地访问index.html看到新的结果了。

THE FIRST LOADER

webpack 除了能够解决js的依赖外，还能解决css的引用，压缩的问题。
这时，咱们须要使用loader，使用css-loader来处理css文件，使用style－loader来支持改动样式。
运行指令

npm install css-loader style-loader

更新entry.js的内容

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

咱们经过!style!css!这样的形式，来指定Loader的传输管道，通过了一系列的loader处理后，结果将会是一个js组件。

编译

webpack ./entry.js bundle.js

从新浏览页面，就能够看到这样的结果。

BINDING LOADERS

经过在命令行中指定须要的loader，咱们能够避免在刚才require部分的代码中，写出!style!css!

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

这样，咱们能够将entry.js修改，并不影响结果

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

CONFIG FILE

程序员老是讨厌繁琐的人工操做，咱们能够将刚才的--module-bind "css=style!css"转由配置文件完成。
目录下添加webpack.config.js

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

这时，咱们只须要输入命令webpack就能够获得相同的结果啦。

WATCH MODE

做为程序员，咱们不但愿每次有改动后，都要手动运行指令。

webpack --watch

使用Watch模式时，webpack将会检测全部入口js文件及其依赖项的变化，一旦变化发生，编译过程将会从新运行。