webpack入门
webpack4 分钟 读完 (大约 663 个字)

webpack入门

webpack是一个前端资源加载、打包工具。
webpack会根据模块的依赖关系进行静态分析，将这些模块按照指定的规则生成对应的静态资源。
webpack可以将多种静态资源转换成一个静态文件，减少了请求。

安装

1
cnpm install webpack -g

创建项目

  1. 新建项目目录
1
mkdir app
  1. 创建index.html和test.js文件

index.html：

1
2
3
4
5
6
7
8
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

test.js文件：

1
document.write("It works.");

打包

1
webpack test.js bundle.js

上面的命令将test.js编译成了bundle.js文件。

实例

test2.js：

1
module.exports = "It works from test2.js.";

更新 test.js 文件：

1
document.write(require("./test2.js"));

使用webpack打包：

1
webpack test.js bundle.js

webpack会根据模块的依赖关系进行静态分析，这些文件会被打包进bundle.js中。
webpack会给每一个模块分配一个唯一的id并通过这个id索引和访问模块。
页面启动的时候，会先执行test.js中的代码，其他模块会在运行require的时候运行。

loader

webpack本身只能处理js模块。
如果要处理其他类型的文件需要使用loader进行转换。

在项目目录下安装css-loader和style-loader：

1
cnpm install css-loader style-loader

js文件中require css文件既可。

自动绑定需要的loader并打包：

1
webpack test.js bundle.js --module-bind 'css=style-loader!css-loader'

配置文件

可以将一些编译选项放在配置文件中便于管理。
创建webpack.config.js文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
    entry: "./test.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loader: "style-loader!css-loader"
        }]
    }
};

下面只需要执行webpack命令既可生成bundle.js文件：

1
webpack

webpack会默认载入当前目录下的webpack.config.js文件。

插件

可以通过cnpm安装一些内置插件：

1
cnpm install webpack --save-dev

下面安装BannerPlugin，用于在文件头部输出一些注释信息，下面修改webpack.config.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var webpack = require('webpack');

module.exports = {
    entry: "./test.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loader: "style-loader!css-loader"
        }]
    },
    plugins: [
        new webpack.BannerPlugin('webpack实例')
    ]
};

然后运行 webpack 命令既可。

开发环境

让编译的输出更加人性化：

1
webpack --progress --colors

监听模式或者说增量编译：

1
webpack --progress --colors --watch

可以使用webpack-dev-server，自动运行webpack自动编译和刷新页面：

1
2
3
4
5
# 安装
cnpm install webpack-dev-server -g

# 运行
webpack-dev-server --progress --colors

喜欢这篇文章？打赏一下作者吧

评论

关注我

链接

分类

最新文章

归档

标签

二分查找1
二叉树1
二维数组1
动态规划2
双指针1
字符串1
排序1
数学1
数组3
树1
递归2
链表2

订阅更新

×