webpack
- 问题
文件依赖关系错综复杂
静态文件请求效率低
模块化支持不友好
浏览器对高级JS特性兼容性不好
安装和配置
--save-dev 也可以写作 -D,表示是开发依赖(开发阶段需要用到的包,项目上线运行后不需要)
初始化项目 npm init -y
跟目录下新建 src 目录,作为代码文件目录
src 下新建 index.html和index.js
index.html 中编写 html 代码
安装 jquerynpm i jquery
安装 webpack
通过命令npm install webpack webpack-cli --save-dev
来进行安装
webpack 配置
根目录下新建 webpack.config.js
module.exports={
mode:'development' // 开发模式
}
配置启动命令
打开 package.json ,在 scripts 属性中加入如下代码
"dev":"webpack"
打包
终端运行如下命令
npm run dev
成功后会在跟目录创建 dist 目录,并生成一个 main.js 文件
运行
在 index.html 中,引入 main.js,再次运行 index.html 即可成功
打包入口文件和出口文件
- 入口文件
就是项目或程序被请求的时候,第一个被访问到的文件,此文件再找相对应的模块进行处理
在当前项目中,index.html 是入口文件,因为我们请求的就是 index.html
但是对于 webpack 来说,打包的入口文件是 index.js,因为 index.js 中引入了其他程序需要的模块,并编写了相应的逻辑代码
- 出口文件
打包之后的文件目录以及名称
webpack 有一些默认配置
入口文件:src/index.js
出口文件:/dist/main.js
重新配置入口文件和出口文件
const path&