利用webpack编译静态HTML项目，自动拷贝静态资源和文件到dist目录中

迈不过友情╰ 2023-10-09 18:56 34阅读 0赞

![580b8ed47c48da12cdfa3ad4666d5904.jpeg][]

有人会说静态的HTML项目可以直接部署到服务器上跑起来干嘛还要用webpack去编译一下，这不是吃饱了撑的吗。确实是。。。那啥。。。万一我的静态项目是用vue写的来编译出Chrome插件呢？万一我想编译压缩一下Chrome插件呢？万一我就是想编译压缩js和html文件呢？

先简单介绍一下项目：（项目也很简单）

项目其实就是一个门户页和几个详情页，门户页里面的按钮会跳转到对应的详情页。

### 正式开始： ###

1、在根目录下，先建一个package.json文件

利用命令： npm init -y 然后在scripts加个命令“build”：“webpack”

利用命令：npm install webpack webpack-cli --save-dev （注意webpack的版本，写这文章的时候用的是webpack4，不同的版本配置可能有些许不同）

2、新建webpack.config.js

3、因为静态的HTML项目，所以没有入口index.js文件。既然没有，那就新建一个。至于里面的内容，可以直接import项目需要的css也可以是空的。这一块看自己的需求。

先简单的配置一下webpack.config.js文件

运行 npm run build命令，在根目录下会生成对应的dist文件夹

接下来处理css

先安装css-loader以及style-loader，命令：npm install css-loader style-loader --save-dev

在config中配置对应的loader

module.exports = {
      mode: "production",
      entry: './src/index.js',
      output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'build/web')
      },
      module: {
        rules: [
          {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
          }
        ]
      },
      plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
          template: './src/index.html'
        }),
      ]
    }

再次运行npm run build命令，如果没报错的话，说明css处理成功了，如果报错了可能和安装的css-loader以及style-loader的版本有兼容问题，建议检查一下对应的版本。

因为是静态的HTML项目，所有引用的js都是下载到本地静态引用，这里就需要把用到的第三方的js文件放到static目录下，然后把static目录的文件拷贝到编译后的dist目录中，编译的时候把用到的详情html也一起拷贝。

利用webpack的一个插件：copy-webpack-plugin

安装命令：npm install copy-webapck-plugin --save-dev 这个插件也要注意安装的版本，因为版本不同的话，传参的方式也不一样，我这里用的是5.1.2版本。

在配置文件中添加配置

// 先引用插件
    const CopyWebpackPlugin = require('copy-webpack-plugin');
    // 省略之前的代码
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
          template: './src/index.html'
        }),
        new CopyWebpackPlugin([
          {
            from: path.resolve(__dirname, 'static'),
            to: 'static',
          },
          {
            from: './src/detail',
            to: 'detail',
          }
        ])
      ]

再次运行npm run build打包，把最终生成的dist目录部署到服务器上就可以了。

至此，整个静态HTML项目利用webpack打包就完成了，是不是很简单。

[580b8ed47c48da12cdfa3ad4666d5904.jpeg]: https://img-blog.csdnimg.cn/img_convert/580b8ed47c48da12cdfa3ad4666d5904.jpeg