webpack项目搭建过程

最新推荐文章于 2024-04-25 23:05:53 发布

安安安安安沅

最新推荐文章于 2024-04-25 23:05:53 发布

阅读量255

点赞数

分类专栏： vue 文章标签：前端 webpack

本文链接：https://blog.csdn.net/qq_37899622/article/details/112555620

版权

vue 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1.新建一个文件夹，如webpack1
2.按window+R，输入cmd回车，打开终端，输入命令，进入该文件夹下：
在这里插入图片描述
快速打开终端并进入指定文件夹的小技巧：打开该文件夹，在路径中输入cmd回车。

3.安装webpack：
(1)npm init -y
(2)npm install webpack --save-dev
(3)npm install webpack-cli --save-dev
在这里插入图片描述

安装完成后，目录如下：
在这里插入图片描述

4.用vscode打开文件夹webpack1，新建目录：
在这里插入图片描述

5.开始写代码(简单示例)：
(1) show.js

const show = (content) => {
  const box = document.getElementById("box");
  box.innerHTML = `你好！${content}`;
};
export { show };

(2)main.js

import { show } from "./show.js";
show("kaivon");

(3)index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Webpack</title>
  </head>
  <body>
    <div id="box"></div>
  </body>
</html>

(4)webpack.config.js

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "boundle.js",
  },
};

6.保存代码后，回到终端，输入：webpack，得到如下图说明打包成功：
在这里插入图片描述

7.回到vscode，可以看到多了一个文件下，下面有个文件：
在这里插入图片描述

8.在index.html文件中添加一句引入：
在这里插入图片描述

9.运行：在浏览器中运行该html文件，可以看到结果：
在这里插入图片描述

10.修改show.js，将”你好”改为”你好啊”，点保存：
在这里插入图片描述

11.此时需要再次打包，在终端输入webpack：
在这里插入图片描述

12.回到浏览器刷新，得到更新的结果：
在这里插入图片描述

注意1：
如果在安装webpack和webpack-cli时使用的是合并语句，可能在打包时执行webpack语句会报如下错：

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no):

解决方法：npm install webpack-cli -g //全局安装
npm install webpack-cli --save-dev //在项目中安装

注意2：
webpack.config.js文件的名字和位置都不能改，如果要使用其他名字，如yi.js
在打包时输入webpack会报错，应该执行命令：webpack --config yi.js

安安安安安沅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack项目搭建过程

1.新建一个文件夹，如webpack12.按window+R，输入cmd回车，打开终端，输入命令，进入该文件夹下：快速打开终端并进入指定文件夹的小技巧：打开该文件夹，在路径中输入cmd回车。3.安装webpack：(1)npm init -y(2)npm install webpack --save-dev(3)npm install webpack-cli --save-dev安装完成后，目录如下：4.用vscode打开文件夹webpack1，新建目录：5.开始写代码(简单示例)
复制链接

扫一扫