今天开始好好摸索前端，从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,得到如下文件目录：
更改配置后，打包
网友评论