【webpack_01配置】手把手从0开始启动、打包html和js文件（最简版）

Lin_熊米

已于 2022-04-05 18:30:36 修改

阅读量1.2k

点赞数

分类专栏： webpack 文章标签： webpack

于 2022-04-05 18:27:42 首次发布

本文链接：https://blog.csdn.net/xiongmi_Lin/article/details/123973353

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

手把手从0开始启动、打包html和js文件

一、初始化项目

新建一个 webpack_01 的项目，以管理员权限打开 cmd ，切换到当前项目路径，执行 npm init -y ，一路回车之后，在项目目录下会生成一个 package.json 文件。

二、安装依赖

在 webpack_01 的项目路径下，安装以下依赖：
npm i webpack-cli@3.3.11 webpack@4.41.6 -D
npm i html-webpack-plugin@3.2.0 -D
npm i webpack-dev-server@3.10.3 -D

三、创建 html 模板和 js 文件

在 webpack_01 的项目路径下，新建 index.html 和 src/main.js，如下：

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>webpack_01</title>
  </head>
  <body>
    <div id="app">
      webpack配置
    </div>
  </body>
</html>

// src/main.js
const a = 10089;
console.log("a", a)

四、创建 webpack 配置文件

在 webpack_01 的项目路径下，新建 webpack.config.js 文件。

/**
 * webpack.config.js webpack 的配置文件
 * 作用：指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）
 * 所有构建工具都是基于node.js 平台运行的~模块化默认采用common.js
 */

// resolve 用来拼接绝对路径的方法
const { resolve } = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js', // 入口
  output: {
    filename: 'bundle.js', // 输出文件名
    path: resolve(__dirname, './dist'), // _dirname node.js变量，代表当前目录的绝对路径
  },
  plugins: [
    // html-webpack-plugin
    // 功能：默认会创建一个空的HTML,自动引入打包输出的所有资源(JS/CSS)
    // 需求：需要有结构的HTML文件
    new HtmlWebpackPlugin({
      // 复制 index.html 文件，并自动引入打包输出的所有资源(JS/CSS)
      template: 'index.html'
  }),
  ]
};

五、配置打包和启动命令

在 webpack_01 的项目路径下，打开 package.json 文件。修改 scripts 的命令，如下：

...
"scripts": {
    "dev": "webpack-dev-server --open --port 3000",
    "build": "webpack ./src/main.js",
    "test": "echo \"Error: no test specified\" && exit 1"
},
...