webpack 打包从0到1

webpack 打包从0到1

断更一年，最近写了个demo，顺便用webpack打包，部署

---

提示：你的三连是作者输出下去的动力哦！！真的真的！！！（小声哔哔：赶紧收藏！！内容持续更新中。。。）

---

前言

一般来说，我用的React命令打包，但今天遇到了html需要引入node_modules包的依赖，并且部署的场景，于是用webpack跑了以下。教程附上！

不懂的问题欢迎下方评论区留言哦，看到会及时反馈

一、全局安装命令

1、生成 package.json

首先npm init，生成 package.json进行包管理，并向其中添加如下调试代码，方便打包

  "scripts": {
    "build": "webpack"
  }

2、安装webpack环境

引入webpack

①全局安装 npm install -g webpack webpack-cli

手动在根目录创建 webpack.config.js

打包Html文件

①全局安装 npm install html-webpack-plugin --save-dev 插件
②在webpack.config.js文件中配置如下代码

  // 插件
  plugins: [
    // html
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./src/index.html"), //文件模板
      filename: "index.html", //输出文件名
    }),
  ],

打包CSS 文件

①首先安装 npm install --save-dev style-loader css-loader
②在webpack.config.js文件中配置如下代码

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },

③在你创建的js中引入 import "./index.css"即可

相当于将css引入js文件中，再将js文件打包

3、创建并配置 webpack.config.js

webpack.config.js 配置如下

const path = require("path"); //调用路径
const HtmlWebpackPlugin = require("html-webpack-plugin"); //引入打包html的插件
const json = require("./package.json"); // 这个路径视当前的路径进行对于修改
const webpack = require("webpack");

module.exports = {
  mode: "development", //开发模式
  //   entry: "./src/index.js", //入口文件
  entry: {
    index: path.resolve(__dirname, "./src/index.js"),
    // 将 第三方依赖 单独打包
    vendor: Object.keys(json.dependencies),
  },
  output: {
    path: __dirname + "/dist", //指定生成的文件目录
    filename: "[name].js", //输出文件名
    publicPath: "/",
  },
  // 插件
  plugins: [
    // html
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./src/index.html"), //文件模板
      filename: "index.html", //输出文件名
    }),
    // new webpack.optimize.CommonsChunkPlugin({
    //   name: "vendor",
    //   filename: "[name].[chunkhash:8].js",
    // }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

二、运行结果

输入 npm run build，执行package.json中的构建命令
最终完美解决！！
最终文件目录如图：

结尾

后面还会持续更新，欢迎下方评论区留言。

作者：琉璃Diaspora