使用Webpack打包JS与CSS教程

灰太狼 2022-11-17 13:56 234阅读 0赞

> 项目已同步至gitHub与gitee：
> 
>  *  [https://github.com/Guoqianliang/ES6-Vue-Node.js/tree/master/webpackDemo][https_github.com_Guoqianliang_ES6-Vue-Node.js_tree_master_webpackDemo]
>  *  [https://gitee.com/guo-qianliang/es6-vue-node.js/tree/master/webpackDemo][https_gitee.com_guo-qianliang_es6-vue-node.js_tree_master_webpackDemo]

### 使用Webpack打包JS与CSS ###

*   *  安装webpack
     *  JS文件打包
     *   *  创建配置文件
         *  执行编译命令
         *  测试
     *  CSS文件打包
     *   *  修改配置文件
         *  执行编译命令
         *  测试

--------------------

Webpack 是一个前端资源加载/打包工具。可以将多种静态资源 js、css、less 转换成一个静态文件，从而减少页面的请求。

![Webpack打包工具][Webpack]

## 安装webpack ##

使用 `npm install -g webpack webpack-cli` 命令全局安装webpack，下载好后使用 `webpack -v` 可以查看版本号：  
![安装webpack并查看版本][webpack]

## JS文件打包 ##

创建 `01.js` 和 `02.js` 分别写入可供调用的JS方法，在 `main.js` 中使用ES5的写法导入这两个方法：

![导入导出JS文件][JS]  
下面使用webpack将这些JS代码进行打包：

### 创建配置文件 ###

在目录下创建名为 `webpack.config.js` 的配置文件。写入下面的代码，下面的代码读取当前项目目录下src文件夹中的`main.js`，分析资源依赖，把相关的JS文件打包，打包后的文件放入当前目录的`dist文件夹`下。打包后的js文件名为`bundle.js`。

const path = require("path") //Node.js内置模块
    module.exports = { 
        entry: './src/main.js', //配置入口文件
        output: { 
            path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
            filename: 'bundle.js'//输出文件名
        }
    }

### 执行编译命令 ###

使用 `webpack --mode=development` 命令后，在 `bundle.js` 中就包含了上面两个js文件的内容并进行了代码打包。  
![打包JS文件][JS 1]

### 测试 ###

为了测试JS文件是否打包成功，创建一个 `index.html` 文件， 并通过 `<script src="./dist/bundle.js"></script>` 引入JS文件，在浏览器中打开，可以JS代码看到成功导入了数据：

![index.html][]

## CSS文件打包 ##

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。需要安装相关Loader插件：

*  安装CSS插件：`npm install -D style-loader css-loader`  
    ![安装CSS插件][CSS]

### 修改配置文件 ###

修改`webpack.config.js`配置文件，`css-loader` 是将 css 装载到 javascript；`style-loader` 是让 javascript 认识css。  
![修改配置文件][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70]

### 执行编译命令 ###

创建`style.css`文件，将背景色设置为红色后引入到`main.js`中，重新执行命令打包CSS文件。  
![引入CSS文件][CSS 1]

![打包CSS文件和JS文件][CSS_JS]

### 测试 ###

在浏览器访问`index.html`文件，发现背景成功变成了红色：  
![index.html][index.html 1]

[https_github.com_Guoqianliang_ES6-Vue-Node.js_tree_master_webpackDemo]: https://github.com/Guoqianliang/ES6-Vue-Node.js/tree/master/webpackDemo
[https_gitee.com_guo-qianliang_es6-vue-node.js_tree_master_webpackDemo]: https://gitee.com/guo-qianliang/es6-vue-node.js/tree/master/webpackDemo
[Webpack]: /images/20221022/f028063456e84a24987f4c4a7e21fae4.png
[webpack]: /images/20221022/49265ced2c0e4e08af77b8f50125fac3.png
[JS]: /images/20221022/445d753c94e7469ab2802aed70318992.png
[JS 1]: /images/20221022/b0017519652d484985e77436092368f1.png
[index.html]: /images/20221022/252405c651bc4eabab4c7684d6756651.png
[CSS]: /images/20221022/18c12d8f33bc4d94b12964b9158ab2bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70]: /images/20221022/9c684edf881d4a16a5ac5391e822ce39.png
[CSS 1]: /images/20221022/313924b887094916ad39a892cdaff401.png
[CSS_JS]: /images/20221022/24a74b4ae25d47e88113fe5c8d1fc1e8.png
[index.html 1]: /images/20221022/1023ed2821aa4aa1a577a0a27e7a6a95.png