从零教你使用webpack，从此项目打包不用愁

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=require('path')
module.exports={
    mode:'development', // 开发模式
    entry:path.resolve(__dirname,'./src/index.js'),