笔记||前端初探之webpack

今天开始好好摸索前端，从webpack开始吧~

本篇仅为如何使用，不涉及具体的原理。

参考资料：网上随便搜了些资料

webpack依赖于node，所以在安装webpack前需要安装node.js

1、新建一个项目（即空文件夹），项目根目录路径运行：npm init -y

2、根目录创建src文件夹，作为代码目录，并新建index.html,及index.js(webpack默认的入口文件，没有则打包会报错)

3、安装jquery：npm i jquery

4、安装webpack:npm install webpack webpack-cli --save-dev

5、根目录创建webpack.config.js，加入以下代码：

module.exports={

    mode:'development' // 开发模式

}

6、配置启动命令

打开 package.json ，在 scripts 属性中加入如下代码

"dev":"webpack"

代码截图

这里有个问题：如果最先安装webpack,运行打包命令时会报错：

控制台截图

7、打包

npm run dev

根目录会新建一个dist，并且dist包含一个main.js:

项目截图

8、src中代码引入换成main.js

9、延申几个概念：

入口文件：项目入口文件为index.html,但对于webpack来说，打包的入口文件是index.js。

出口文件：打包后生成的main.js文件

以上是webpack默认的入口和出口文件，可以在配置中自行配置，比如我将配置换成以下：

配置文件修改

但我需要在打包前，在src中新建一个名为add的js:add.js

运行npm run dev,得到如下文件目录：

更改配置后，打包