【Webpack】 概述 + 安装 + 在项目中的用法（详细步骤：打包JS，打包CSS）

文章目录

• Webpack

• 一、概述
• 二、安装
• 三、在项目中的用法

• 1、打包JS
• 2、打包CSS

• 四、附加

Webpack

一、概述

二、安装

全局安装

npm install -g webpack webpack-cli

检验

webpack -v

三、在项目中的用法

1、打包JS

1、在项目文件夹下，创建一个nodejs项目：npm init -y

2、创建一个src目录

3、在src存放两个需要合并的util.js和common.js

4、准备一个入口文件main.js，对模块进行集中引入

5、在根目录下创建webpack.config.js文件，并配置打包的规则

6、执行webpack

或者是用 webpack 的带参命令，得到的整合文件是格式化好的，如下图

测试

（注：此处为NaN，主要是Node.js默认不支持 ES6 ，因此也不支持此语法糖，借助Babel 转换工具，即可解决此问题）

2、打包CSS

1、安装style-loader和 css-loader

npm install --save-dev style-loader css-loader

2、修改webpack.config.js

在 module 键中设置

3、修改main.js，引入css文件

4、运行编译命令

四、附加

常用命令

• webpack // 最基本的启动webpack的方法
• webpack -w // 提供watch方法；实时进行打包更新
• webpack -p // 对打包后的文件进行压缩
• webpack -d // 提供source map，方便调式代码

webpack.config.js 常用配置