学习笔记一步步了解webpack

时间 2019-11-13

标签学习笔记步步了解 webpack 繁體版

原文原文链接

前言

demo 地址: https://github.com/yy8597/webpack-demosjavascript

以前学习了 broswerify，发现确实很好用。虽然没有 grunt 那样丰富的配置和插件，但就是以为“恩！这就是我想要的结构”。
webpack 感受就是 broswerify 的进阶版，怎么说呢：css

有更多可配置内容
比起 broswerify 一股脑得打成单包更智能。

官方介绍html

安装

npm install webpack -g

-g 方便咱们在命令行直接使用 webpackjava

使用

基本命令 demo1

首先创建两个文件webpack

//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>

执行 webpackgit

$ webpack ./entry.js bundle.js

生成 bundle.js，而后打开 index.html 就能够看到github

It works.

添加依赖 demo2

增长一个文件web

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

咱们修改 entry.js 加载 content.js 的内容npm

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

一样执行浏览器

$ webpack ./entry.js bundle.js

在浏览器中看到

It works from content.js.

done~

webpack 分析你的入口文件(entry.js)所依赖的其余文件（模块），这些文件都会被打包到 bundle.js中。webpack 会分配给每一个模块一个惟一的 Id，在 bundle.js 中经过这个 Id 来访问每一个模块。在程序启动的时候只会处理入口模块（entry.js）, require 方法会在执行时即时地处理依赖模块。

打包 css demo3

webpack 只能处理 javascript，要处理 css 就须要安装css-load来转换 css 为 js，还要安装style-loader 将转换后的 css 加载到 dom 中。

WHAT ARE LOADERS?

$npm install css-loader style-loader --save

接着增长 css 文件

body {
    background: yellow;
}

修改 entry.js，而后就能看到效果

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

一样执行

$ webpack ./entry.js bundle.js

It works from content.js.

经过 “!style!css!” 这样的前缀，能够把文件进行一系列的转化，最终变成 javascript 的一个模块。

命令行绑定 loaders

若是咱们不想写过长的 require : require("!style!css!./style.css");，简化为require("./style.css")
或者咱们喜欢灵活定制 css 文件的转化方式。

修改 entry.js

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

执行下面的命令：

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

官网说明在这有个错误，css=style\!css 里面少了个反斜杠，缘由是叹号在 bash 里有特殊意义

It works from content.js.

添加 webpack.config.js demo4

理解了上面的 demo 之后，接下来咱们就能够在项目根目录下新建一个webpack.config.js ，而后经过一句命令$ webpack就能打包咱们的项目。

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

webpack 命令会尝试读取同目录中的 webpack.config.js 文件。

And More

还能够经过一些参数使得打包过程可视化

$ webpack --progress --colors

--progress 打印打包日志
--colors -c 带颜色的日志（官方是这么描述的，但我没看到颜色...）

固然还有 watch 功能

$ webpack --progress --colors --watch

必须的要有 server

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

~ 完 ~

这里只是介绍了 webpack 基本的用法
demo 基本都是翻译自webpack/getting-started
更多详细和进阶的内容仍是推荐去官网看看

学习笔记 一步步了解webpack

前言

安装

使用

基本命令 demo1

添加依赖 demo2

打包 css demo3

命令行绑定 loaders

添加 webpack.config.js demo4

And More

~ 完 ~

参考

学习笔记一步步了解webpack