前言

上一节我们讲了对js，html，css的一个简单的打包，这一节我们开始对这些文件进行一个分开打包。原本在上一节讲述完之后就准备开始讲述后面的打包知识，但是无可奈何突然被安排了一个新的官网项目，经过两三天的埋（hun）头（shui）苦（mo）干（yu）终于弄完了，接下来继续更新！！！

JS分包

1、回顾

上一期我们讲了对 webpack.config.js 的一些配置，我们知道在 exports 中， entry 是对入口文件的配置，打包生成后的文件就是 html 所引入的 js 文件。打包某个 html 的时候，这个 html 就是一个 template 模板。

2、JS单独打包

OK 现在我们开始打包 js，关于打包多个文件的方法我在网上也看到了不同的写法，这里我就按照我自己的理解讲述一种。首先我们现在知道了入口文件是 entry，我们首先在 src 文件夹下面再新建一个 main.js 。然后在 main.js 下面写一点代码，打包后能够比较直观的看到效果。

接下来就开始配置 config.js 的 entry，然后这里需要配置一下 output, 这里我们使用[name].js的命名方式，这种命名方式会与配置的入口文件名字相同。

  entry: {
    'js/index':'./src/index.js',
    'js/second':'./src/main.js',
  },
  output: {
    filename: '[name].js',  //输出文件名
    path:path.resolve(__dirname,'./dist') //指定生成的文件目录
  }

可以看到在配置 entry 对象的时候，key 是 'js/***'这种方式，这样打包出来后的 js 文件都会在 js 文件夹下面。接下来运行 npm run build ，我们就可以看到打包后的文件夹里面有个单独的 js 文件夹，再打开 index.html 可以看到 index.js 与 main.js 都起了效果。

运行结果：

3、CSS单独打包

css的单独打包我们需要下载一个插件，经过多次尝试之后终于找到了mini-css-extract-plugin，之前在网上有看到其他的插件，但是好像只支持 webpack3，这个插件能够兼容 webpack4/5，还是使用 npm install mini-css-extract-plugin --save-dev 下载插件。我们继续配置 webpack.config.js，首先在头部引入刚刚下载的插件

// css分离
const MiniCssExtractPlgin = require("mini-css-extract-plugin")

接下来需要在 plugins 里添加这个插件

// css 分离
    new MiniCssExtractPlgin({
      filename: "css/index.css"
    }),

打包后的文件就会根据 filename 自动生成 css 文件夹同时我们还要配置对应的 rules

{
        test: /\.less$/,
        use: [
          {
            loader: MiniCssExtractPlgin.loader,
            options: {
              publicPath: '../'
            }
          },
          // 不需要 style-loader，会报错
          'css-loader',
          'less-loader'
        ]
      }

这里 less 的 use 中，就不需要像上节中打包 less 一样，这里就不需要写 style-loader 了，好的我们再 build 一下。

我们可以看到打包后的 dist 文件夹里面 css 也分开了，再看 index.html 里面，分别自己引入了各个 js 和 css 文件。

4、打包图片

我们平常在 html 和 css 里面可以直接引入图片，如果我们不进行图片的打包配置，在 build 的时候就会报错，所以我们要做一些处理。这里我们对于图片的处理需要下载一个 loader，我们继续执行npm i file-loader --save-dev, 然后我们再去配置 rules。

      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              limit: 2048,
              name: '[name]_[hash:8].[ext]',
              outputPath: 'image'
            }
          }
        ]
      },

OK 配置完成，现在就去 src 文件夹下面新建一个 images 文件夹，在里面添加一张图片。

我们在 main.js 文件下编写一些代码，插入这张图片。

import pic from "./images/1.png"

function component() {
  let element = document.createElement("div")
  const img = new Image();
  img.src = pic;
  element.appendChild(img)

  return element
}

document.body.appendChild(component())

到现在关于图片的配置及使用我们就做好了，再去 build 一下。

看一下打包后的 index.html

达到了预期的效果

5、静态文件打包

webpack 对静态文件的打包就类似于文件的迁移，这里我也找了个插件，网上也有其他的插件，之前看到了一个但是只能兼容 webpack3 的，作者找到的这个能够兼容 webpack4/5，由于现在 webpack 已经更新到 5 了，有些插件在使用的时候很容易报错，大家平时用到的时候要注意。copy-webpack-plugin就是用来打包静态文件的，我们还是使用 npm i copy-webpack-plugin --save-dev 下载。

我们先在 src 下面新建一个 static 文件夹，里面放一张图片，接着我们去 config.js 文件里面引用

const CopyPlugin = require("copy-webpack-plugin")

接着在 plugins 里面配置

new CopyPlugin({
      patterns: [
        {
          from: './src/static',  //原始位置
          to: './static'  //打包到的位置
        }
      ]
    })

再去 build 一波

我们可以看到打包出来的 dist 文件夹下已经有了 static 静态文件夹。

6、热更

这里我再提一手热更新，就是当 npm run serve 的时候，不需要重启项目，更改代码就能看到页面的变化。这个插件 webpack 自带，我们只需要引入就行了。

1、插件引入

首先导入 webpack

const Webpack = require('webpack')

然后在 plugins 下使用

// 热更
    new Webpack.HotModuleReplacementPlugin(),

2、配置devServer

这个就很简单，在 exports 下面再配置一个 devServer，让项目在本地服务器启动。

devServer:{
    port: 3000,   //端口号
    hot: true     //热更
  },

3、配置package.json

我们先要下载一个webpack-dev-server，还是 npm i webpack-dev-server --save-dev

然后在在 package.json 的 scripts 下新增一个启动

  "scripts": {
    "build": "webpack",
    "serve": "webpack-dev-server --open"
  },

好了配置完成了，接下来终端 npm run serve 一波启动项目

7、完整配置文件

1、package.json

{
  "name": "webpack_project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "serve": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "copy-webpack-plugin": "^9.0.1",
    "css-loader": "^6.2.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.2",
    "less": "^4.1.1",
    "less-loader": "^10.0.1",
    "mini-css-extract-plugin": "^2.3.0",
    "style-loader": "^3.2.1",
    "webpack": "^5.53.0",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.3.0"
  }
}

2、webpack.config.js

const Webpack = require('webpack')

const path = require('path') //调用路径
const HtmlWebpackPlugin = require('html-webpack-plugin')  //引入打包html的插件

// css分离
const MiniCssExtractPlgin = require("mini-css-extract-plugin")

const CopyPlugin = require("copy-webpack-plugin")
module.exports = {
  mode: 'development',  //开发模式
  entry: {
    'js/index':'./src/index.js',
    'js/second':'./src/main.js',
  },
  output: {
    filename: '[name].js',  //输出文件名
    path:path.resolve(__dirname,'./dist') //指定生成的文件目录
  },
  devServer:{
    port: 3000,
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              limit: 2048,
              name: '[name]_[hash:8].[ext]',
              outputPath: 'image'
            }
          }
        ]
      },
      {
        test:/\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: MiniCssExtractPlgin.loader,
            options: {
              publicPath: '../'
            }
          },
          // 不需要 style-loader，会报错
          'css-loader',
          'less-loader'
        ]
      }
    ]
  },
  // 插件
  plugins: [
    // html 
    new HtmlWebpackPlugin({
      template:  path.resolve(__dirname, './src/pages/index.html'), //文件模板
      filename:'index.html',  //输出文件名
    }),
    // css 分离
    new MiniCssExtractPlgin({
      filename: "css/index.css"
    }),
    new CopyPlugin({
      patterns: [
        {
          from: './src/static',
          to: './static'
        }
      ]
    }),
    // 热更
    // new Webpack.HotModuleReplacementPlugin(),
  ]
}

3、完整目录结构

总结

到现在为止，我们可以单独打包出 js、css、static以及图片资源了，平常我们看到的 app 很多也是这种结构，如果我们没有使用框架自带的打包的话，就需要我们自己配置，然后生成这种目录结构。、

前段时间在老大那了解到一个 github 上的类似于文字修仙的文字人生小游戏，后面一段时间我会讲解一下那个游戏的目录结构，以及如何打包成一个app 文件。在那之前我还会讲一下electron，这个东西能够把一个前端项目打包成一个桌面应用，我们最后要得到的就是一个文字人生的桌面 app。

好的我要重开了！！！

webpack的基本使用（详解）2-打包js、html、css

前言