Webpack4.x(一)——目录结构与基本使用

最新推荐文章于 2022-02-23 13:23:00 发布

采故事的女孩

最新推荐文章于 2022-02-23 13:23:00 发布

阅读量263

点赞数

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

本文链接：https://blog.youkuaiyun.com/weixin_42416812/article/details/100072307

版权

Webpack 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了Webpack4.x的安装方法，推荐使用cnpm加速，并讲解了基本的目录结构设置。在配置完成后，项目打包后将生成dist目录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常用命令：mac/window(略) 自行百度  
创建文件夹(window/mac)： mkdir webpack-demo
创建文件(window)：type nul > 文件名.后缀名  mac:touch  文件名  
type nul > index.js

目录文件：

——dist                   //打包生成后的文件
——node_modules           //模块
——src                    //项目中的文件
——index.html             //首页
——package.json           //包依赖文件
——webpack.config.js      //webpack配置文件

安装webpack:

npm(cnpm) init -y
npm(cnpm) i  webpack  webpack-cli -D

(可以使用淘宝cnpm，速度会快一点，但是有时候包会有一点问题)

创建目录结构：

windown:
mkdir  src   //创建src文件
type nul> index.html  
type nul>webpack config.js 

在src目录创建演示文件：
type nul> main.js
type nul> show.js

//index.html
<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-16 11:55:28
 * @LastEditTime: 2019-08-16 14:39:05
 * @LastEditors: Please set LastEditors
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="box"></div>
</body>
</html>

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

export {show};  //es6的模块化语法

//main.js
import { show } from './show'

show('kavion');

命令行输入：
webpack

//报错
//全局安装webpack   
npm install webpack-cli -g
webpack

打包之后生成dist文件：

//在index.html文件引入dist文件，之后用浏览器打开页面就能看见输入的内容了：你好！kavion
<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-16 11:55:28
 * @LastEditTime: 2019-08-16 14:39:05
 * @LastEditors: Please set LastEditors
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="box"></div>
    <script src="./dist/boundle.js">
        
    </script>
</body>
</html>