「工具链🔧」webpack从原生项目开始📦📦(手把手带你从原生构建最简单的webpack项目）Hi，这里是Just

Hi，这里是JustHappy，相信很多这几年接触前端的同学和我一样学完HTML、CSS、JavaScript就开始了Vue的学习，当然，对于Vue这种渐进式的MVVM框架来说，这时候学习Vue可以获得极大的成就感，这有助于我们不放下求知的脚步👣👣，但是似乎又错过了什么...

直到你再次打开了你最开始练手“前端三件套”的项目，它或许是“某商城”、“某平台”...

所以我有个想法，给他们上Webpack📦，重走前端“西游路”

我们从官网开始吧

What is bundle？

bundle 在翻译为中文为“捆绑”或者“包”之类的

正如你所见，在webpack官网中间一直滚动着 “bundle you XXX” 这行字，这也是webpack的作用：将所有的包含HTML、CSS、JavaScript、静态资源文件等打包成一个或者多个bundle.js

为什么要打包呢？

这里由于篇幅，转一个大佬的文章，我觉得讲的很好 ➡️# 为什么现代前端工程都需要使用webpack打包？

来看看我们要改造的项目

项目结构如下，很简单，只有一个页面

这是我最开始学的时候敲的一个小米商城静态页面，想想都是回忆啊

让我们开始吧！

去吧npm！

可以看到这个项目还是没有package.json的，要想引入webpack就得先有npm

# 使用默认初始化
npm init -y 
# 安装webpack，当然为了更快的速度，也可以使用cnpm、pnpm等
npm install --save-dev webpack
# 安装webpack-cli
npm

安装成功后我们需要在package.json中“script”部分添加一段代码，并且在项目根目录创建webpack.config.js文件

// 这样在完成之后我们就可以愉快的使用npm run build来打包项目了
"scripts": {
  "build": "webpack --config webpack.config.js"
}

编辑我们的webpack.config.js

const path = require('path');

module.exports = {
  mode: "development", //设置为生产环境
  entry: path.resolve(__dirname, "./src/index.js"),
  output: {
    filename: "js/[name].js",
    path: path.resolve(__dirname, "./dist"),
  },
};

项目结构的调整

可以看到目前我们的项目的结构是不太合理的，我们需要有📁src目录，并将业务相关源代码存放到里面并创建一个入口文件index.js。就像下面这样（运气好，没有出现路径上的错误，也可能是项目过于简单了）

这时候就可以运行`npm run build`来试试啦

可以看到我们成功的生成了📁dist目录,并且有了一个📃bundle.js的文件，但是这个文件目前是没有任何用处的只有一些内容，我们可以打开看看

当然，目前这个📁dist目录下的东西是没有任何功能和作用的，接下来让我们给它加上

🚪入口文件`index.js`和`index.html`的编辑

既然选择了使用webpack，我们就可以删除掉原来index.html中<head>标签的引用

对！就是以下代码的6~11行全部删除

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小米</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="icon" href="images/favicon.ico">
  <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="./css/global.css">
  <link rel="stylesheet" href="./css/mi.css">
  <script src="./js/style.js"></script>
</head>

变成这样

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小米</title>
</head>

然后在入口文件index.html中写以下代码

import "./css/global.css";
import "./css/mi.css";
import "./css/reset.css";

import "./font-awesome/css/font-awesome.css";
import "./font-awesome/css/font-awesome.min.css";

import "./js/style.js";

打包我们的HTML

安装html-webpack-plugin插件

npm install --save-dev html-webpack-plugin

在webpack.config.js引入html-webpack-plugin插件并使用

const HtmlWebpackPlugin = require("html-webpack-plugin");
...
module.exports = {
    ...
      plugins: [
        new HtmlWebpackPlugin({
          filename: "index.html",
          template: "./src/index.html",
          chunks: ["main"], //打包后引入的js文件
       }),
     ],
}

打包我们的CSS

安装css-loader和style-loader

npm install --save-dev css-loader  
npm install --save-dev style-loader

在webpack.config.js中使用

const HtmlWebpackPlugin = require("html-webpack-plugin");
...
module.exports = {
    ...
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ]
    ...
}

试试npm run build 📦📦📦

我们用live server打开生成的📁dist目录中的index.html文件可以看到大部分的样式已经被渲染出来了

可以看到目前还是还有很多图片没有被渲染的，接下来让我们解决一下

使用CopyWebpackPlugin“搬运”图片

由于只是集成webpack，不涉及性能优化，所以我们直接使用CopyWebpackPlugin来打包我们的图片，下一篇文章，让我们来试试webpack性能优化？🚀🚀

npm install --save-dev copy-webpack-plugin

同样的，我们应该在在webpack.config.js中使用并配置这个插件

const CopyWebpackPlugin = require("copy-webpack-plugin");
...
module.exports = {
    ...
      plugins: [
      ...
        new CopyWebpackPlugin({
          patterns: [
            {
              from: path.resolve(__dirname, "./src/images"),
              to: path.resolve(__dirname, "./dist/images"),
            },
          ],
       }),
     ],
}

ok,让我们再运行npm run build并打开试试

🎉🎉ok，到这我这个项目基本上集成了webpack，该到你啦

可以看到我们把原本的项目打包成了目前的状态，将CSS全部塞入了main.js中，在之后我们将继续更新这个项目，或许你我都可以共同进步呀🎆🎆

「工具链🔧」webpack从原生项目开始📦📦(手把手带你从原生构建最简单的webpack项目）