【webpack实战】对一个纯HTML、CSS品优购静态商城网站打包

前面写了一些关于webpack专辑的博客，在这里小试牛刀，对一个静态网站进行打包，做到学以致用。

1.关于打包用到的资源与知识

博客形式：

• 品优购商城
• 如何使用webpack实现模块化打包？
• 如何通过Loader实现特殊资源加载？实例加载css文件
• 插件机制横向扩展webpack的构建能力 三个插件的使用实例

2.打包准备工作

1.查看项目文件

2.进入项目所在的目录：

3.在项目目录安装webpack

由于 Webpack 是一个 npm 工具模块，所以我们先初始化一个 package.json 文件，用来管理 npm 依赖版本，完成之后，再来安装 Webpack 的核心模块以及它的 CLI 模块，具体操作如下：

$ npm init --yes
$ npm i webpack webpack-cli --save-dev

4.新建webpack配置文件：

稍后在这里配置打包。

5.引入打包用到的loader或plugin

由于这是一个纯HTML、CSS的静态的商城，所以打包离不开下面的加载器、插件：

• css-loader
• style-loader
• url-loader
• file-loader
• html-webpack-plugin
• copy-webpack-plugin

利用如下命令引入：

$ npm install css-loader --save-dev 
$ npm install style-loader --save-dev
$ npm install url-loader --save-dev
$ npm install html-webpack-plugin --save-dev
$ npm install copy-webpack-plugin --save-dev

3.打包

1.这是一个纯HTML、CSS的静态网站，所以没有相关的js逻辑，但webpack打包入口通常是js文件，因此这里是以一个只引入CSS文件的index.js文件作为入口。

2.配置webpack.config.js(一步一步配置,注意js文件代码差异)

a.先配置打包css文件

const path = require("path");
module.exports = {
   
  mode: "development",
  entry: "./index.js",
  output: {
   
    filename: "pinyougou.js",
    path: path.join(__dirname