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

有人会说静态的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文件

const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const path = require('path');
module.export = {
    mode: "production",
    entry: './src/index.js',
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, 'dist')
   },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
          template: './src/index.html'
        }),
  ]
}

运行 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打包就完成了，是不是很简单。