使用Webpack打包JS与CSS教程

项目已同步至gitHub与gitee：

• https://github.com/Guoqianliang/ES6-Vue-Node.js/tree/master/webpackDemo
• https://gitee.com/guo-qianliang/es6-vue-node.js/tree/master/webpackDemo

---

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

Webpack打包工具

安装webpack

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

安装webpack并查看版本

JS文件打包

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

导入导出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文件是否打包成功，创建一个 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插件

修改配置文件

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

修改配置文件

执行编译命令

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

引入CSS文件 打包CSS文件和JS文件

测试

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

index.html