js学习笔记：webpack基础入门（一）

时间 2019-11-19

原文原文链接

以前据说过webpack，今天想正式的接触一下，先跟着webpack的官方用户指南走：

在这里有：javascript

如何安装webpack
如何使用webpack
如何使用loader
如何使用webpack的开发者服务器

1、安装webpack

你须要以前安装node.jscss

$ npm install webpack -g

安装成功后，即可以使用webpack命令行了。html

ok，开始工做！

2、新建一个空目录，名字为myApp，文件以下

entry.jsjava

document.write("It works.");

index.html文件node

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

此时并无bunble.js文件，咱们经过webpack命令来生成：webpack

$ webpack ./entry.js bundle.js

这句命令会编译entry.js文件为新文件bunble.js。若是执行成功的话，会有以下结果：web

Version: webpack 1.12.2
Time: 43ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 28 bytes [rendered]
    [0] ./tutorials/getting-started/setup-compilation/entry.js 28 bytes {0} [built]

而后，打开index.html，便会看出输出到屏幕上的It works.。npm

3、使用模块的形式，进行简单的模块导出与加载

新建文件：content.js浏览器

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

而后，编辑entry.js文件：服务器

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

而后，继续用webpack进行编译：

$ webpack ./entry.js bundle.js

此时浏览器变回输出It works from congtent.js。

webpack会本身分析你的入口文件是否依赖其余文件，这些文件（或者模块）会引入到bundle.js中。webpack会给每一个模块一个惟一的id，而后会在bundle.js中保存访问这些模块的id。刚开始的时候只有入口文件被执行，当碰到require的时候就会加载依赖。

4、使用第一个加载器

在目录中新建一个css文件，webpack本身只能处理js文件，须要css－loader来处理css文件，同时也须要style－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"));

此时，从新编译文件，刷新浏览器，会发现背景色变成黄色了。

$ webpack ./entry.js bundle.js

在引入css的时候，咱们写了!style!css!，其实也能够不用写，能够将加载器绑定在webpack的命令中：

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

而后，执行命令的时候把加载器一块儿输入：

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

而后刷新浏览器，会发现结果是同样的。

5、利用配置文件

经过以上的方式，咱们每次添加文件，都要写一个规则，而后在编译执行，确实很麻烦，webpack能够经过配置文件来简化这些事情：

新建webpack.config.js文件，并利用以下规则

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

而后执行命令的时候只须要一个webpack便可：

$ webpack

执行webpack后，会搜索当前目录下的webpack.config.js文件，并加载。

以上的配置文件和以前的代码执行的效果相同，只不过是将规则写入到了一个配置中，能够更方便灵活的进行配置。其实配置也很明朗：入口文件、出口文件、加载器。

6、更漂亮的输出结果

以前有输出结果，不够直观，webpack能够经过几个配置项来美化输出结果：

进度条:progress

若是文件不少，咱们须要知道当前正在编译哪一个文件，还有颜色

webpack --progress --colors

观察模式:watch

所谓观察模式，即监听模式，若是有文件改变，则自动编译：

webpack --progress --colors --watch

7、开发者服务器

所谓开发者服务是启动webpack提供的服务器，全部的测试在该服务器下进行。须要安装webpack-dev-server

npm install webpack-dev-server -g

而后，启动该服务器便可：

webpack-dev-server --progress --colors

此时，会自动启动一个端口为8080的服务器，在浏览器中访问：http://localhost:8080就能够访问了。

若是文件有该改变，代码会自动编译而且自动刷新浏览器。至关于绑定了watch模式。

须要注意的是，访问http://localhost:8080是没法自动刷新的，须要访问http://localhost:8080/webpack-dev-server/bundle，你修改文件，该页面会自动刷新。

原文地址：js学习笔记：webpack基础入门（一）