使用Webpack打包JS与CSS
- 安装webpack
- JS文件打包
- 创建配置文件
- 执行编译命令
- 测试
- CSS文件打包
- 修改配置文件
- 执行编译命令
- 测试
Webpack 是一个前端资源加载/打包工具。可以将多种静态资源 js、css、less 转换成一个静态文件，从而减少页面的请求。
安装webpack
使用 npm install -g webpack webpack-cli 命令全局安装webpack，下载好后使用 webpack -v 可以查看版本号：
JS文件打包
创建 01.js 和 02.js 分别写入可供调用的JS方法，在 main.js 中使用ES5的写法导入这两个方法：
下面使用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文件是否打包成功，创建一个 index.html 文件， 并通过 <script src="./dist/bundle.js"></script> 引入JS文件，在浏览器中打开，可以JS代码看到成功导入了数据：
CSS文件打包
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。需要安装相关Loader插件：
- 安装CSS插件：
npm install -D style-loader css-loader
修改配置文件
修改webpack.config.js配置文件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css。
执行编译命令
创建style.css文件，将背景色设置为红色后引入到main.js中，重新执行命令打包CSS文件。
测试
在浏览器访问index.html文件，发现背景成功变成了红色：
