简单配置webpack过程（一）

1.webpack的概念

1. webpack本质上是一个现代化JavaScript应用程序的静态模块打包器，webpack处理应用程序时，它会递归的构建一个依赖关系图，这些模块打包成一个或者是多个bundle。
2. 核心的包括：
   （1）入口（entry）
   （2）出口（output）
   （3）加载器（loader）
   （4）插件（plugins）

创建webpack

1. npm inti -y 或yarn init -y 配置一个package.json 包文件
   
   image.png

2.npm install webpack webpack-cli -dev-server -D或者yarn add webpack webpack-cli -dev-server -D（该指令是指配置环境安装在项目本地上使用）

image.png

输入该指令生成node_modules文件package.json中生成几个开发环境依赖项,同时node_modules也是产生大量文件需要创建.gitigonre来忽略文件

3.根目录下创建一个index.html

4.跟目录下创建一个src文件夹（用来放置代码的，源代码的存放地址）

5.根目录下创建一个webpack.config.js(webpack的配置文件)

写入webpack代码

1.src下创建也创建一个index.js文件(作用是整个项目的入口js文件）
2.通过ES6中的暴露接口方法 export default 暴露数据

image.png

image.png

3.在webpack.confing.js中设置配置

image.png

image.png

4.启动项目两种方法在本地启动webpack
（1）输入 npx webpack
!

image.png

  "scripts": {
    "dev": "webpack"
  },

image.png

两种情况下都提示我们需要安装一个cli的文件才能运行webpack命令可以直接按yes来安装或者输入指令
install webpack-cli -D 或者yarn add webpack-cli -D 所以建议一开始装webpack 时都一起安装
输入npm run dev启动打包但是生成了一个警告意思是指这个model选项没有做一个设置，那么
webpack 会默认使用production 这个值设置在里面

image.png

image.png

6.打包成功
（1）成功打包 （未设置mode之前默认打包是压缩后的）

image.png

（2）成功打包 （设置mode之后默认打包是没有压缩的）

image.png

7.配置完成
配置完成后可以直接在index.html中直接引入自动打包好的build.js文件

image.png