阅读 118

webpack学习笔记(二) 入门

这篇文章我们将通过一个小小的 Demo 了解 webpack 的基本使用

1、入门

首先我们创建一个空目录 Demo,作为项目的根文件夹

在目录下运行 npm init 命令,初始化文件 package.json

> npm init -y # 以默认的方式初始化 package.json 文件
复制代码

然后,我们可以通过 NPM 安装 webpack

> npm install --save-dev webpack
复制代码

如果使用的是 webpack 4+ 版本,那么还需要安装 webpack-cli

> npm install --save-dev webpack-cli
复制代码

接着,我们在根目录下创建两个文件夹 dist(用于管理输出文件) 和 src(用于管理资源文件)

src 文件夹放自己写的代码文件,dist 文件夹放打包之后的文件,更准确的说是用于发布的文件

dist 文件夹下创建 index.html 文件,并写上下面的代码

<!doctype html>
<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
        <!-- 这里引用的 main.js 文件会在打包之后生成 -->
        <script src="main.js"></script>
    </body>
</html>
复制代码

src 文件夹下创建 index.js 文件,并写上下面的代码

// 引用 lodash 模块,webpack 会将其一起打包
// 由于 lodash 是一个外部模块,所以使用之前要先安装:npm install --save lodash
import _ from 'lodash';

function component() {
    var element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
}

document.body.appendChild(component());
复制代码

此时,文件夹的目录结构如下

Demo
	- package.json
	- package-lock.json
	+ node_modules
	+ src
		- index.js
	+ dist
		- index.html
复制代码

好,这时我们运行 webpack 打包文件,它将 /src/index.js 打包后输出到 /dist/main.js

> npx webpack
> # 或者直接运行 webpack 的二进制文件 `./node_modules/.bin/webpack`
> # windows 下运行 webpack 的二进制文件 `node_modules\.bin\webpack`
复制代码

之后,我们应该可以看到在 dist 目录下生成了一个 main.js 文件

然后,用浏览器打开 dist 目录下的 index.html 文件应该可以看到 Hello webpack 的文本

2、配置文件

到目前为止,我们使用的都是 webpack 的默认配置,比如说入口文件和输出文件

如果想要更丰富的自定义配置,那么我们也可以自己写一个配置文件 webpack.config.js

这样 webpack 会自动读取,现在整个项目的文件结构如下

Demo
	- package.json
	- package-lock.json
	- webpack.config.js
	+ node_modules
	+ src
		- index.js
	+ dist
		- index.html
复制代码

然后我们在 webpack.config.js 文件中写下配置

const path = require('path');

module.exports = {
    // 入口文件
    entry: './src/index.js',
    // 输出文件
    output: {
        filename: 'bundle.js', // 这里我们将输出文件命名为 bundle.js
        path: path.resolve(__dirname, 'dist')
    }
};
复制代码

因为打包后输出的文件名改变了,所以我们还要去 /dist/index.html 改一下引用的文件名

<!doctype html>
<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
        <!-- 将引用的文件改为 bundle.js -->
        <script src="bundle.js"></script>
    </body>
</html>
复制代码

最后,我们再用 webpack 进行打包,并使用指定的配置文件

> npx webpack --config webpack.config.js
复制代码

可以看到,运行命令之后会在 dist 目录下生成一个 bundle.js 文件

同样,用浏览器打开 dist 目录下的 index.html 文件应该可以看到 Hello webpack 的文本

这证明配置文件已经生效啦

3、NPM 命令

一般 webpack 的启动命令都会附加多个参数,所以每次构建的时候都要输入很长的一串命令

这也太麻烦了一些,所以我们可以在 package.json 文件的 script 中添加一个 build 命令

{
    "name": "Demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack --config webpack.config.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^4.39.2",
        "webpack-cli": "^3.3.7"
    },
    "dependencies": {
        "lodash": "^4.17.15"
    }
}
复制代码

然后,当需要运行构建命令的时候,直接输入命令 npm run build 即可

4、管理资源

webpack 虽然只能理解 JavaScript 模块,但是通过 loader 也能引入其它类型的文件

下面我们以引入 CSS 文件为例,处理 CSS,我们需要使用 style-loader 和 css-loader

> npm install --save-dev style-loader css-loader
复制代码

然后在配置文件 webpack.config.js 中指定处理规则

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                // 指定需要处理的文件
                test: /\.css$/,
                // 指定需要使用的 loader
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
};
复制代码

好,然后我们可以开始写样式文件啦,目录结构如下

Demo
	- package.json
	- package-lock.json
	- webpack.config.js
	+ node_modules
	+ src
		- index.js
		- index.css
	+ dist
		- index.html
复制代码

index.css 文件的内容如下

.hello {
	color: red;
}
复制代码

然后在 index.js 文件中引入 index.css(作为一个模块引入)

import _ from 'lodash';
// 引入 CSS 文件
import './index.css';

function component() {
    var element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello'); // 添加样式
    return element;
}

document.body.appendChild(component());
复制代码

最后运行构建命令 npm run build 打包项目

这时,在浏览器打开 /dist/index.html 文件应该可以看到文字变成红色

5、管理输出

我们可以使用插件管理输出,这里以 clean-webpack-plugin 插件为例

还记得我们在还没创建 webpack.config.js 文件之前,打包之后默认的输出文件是 main.js

此后,这个文件就一直残留在 /dist 目录(假设没有手动删除的话),这样其实是十分不科学的

所以我们可以使用 clean-webpack-plugin 插件,在重新打包之后把不需要用到的文件自动清除

首先我们来安装插件

> npm install --save-dev clean-webpack-plugin
复制代码

然后在 webpack.config.js 文件中进行配置

const path = require('path');
// 引入插件,注意引入 CleanWebpackPlugin 插件需要用到解构语法
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    // 使用插件
    plugins: [
        // 删除 output.path 指定目录中的所有文件,然后重新构建打包
        new CleanWebpackPlugin({
            // 指定删除的文件和不被删除的文件,使用 ! 指定不被删除的文件
            cleanOnceBeforeBuildPatterns: ['*.js', '!index.html']
        })
    ]
};
复制代码

好,这时候重新运行构建命令

> npm run build
复制代码

你会发现 dist 文件夹中只剩下两个文件,分别是 index.htmlbundle.js,是不是瞬间变得清爽起来呢

文章分类
前端
文章标签