欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

webpack4.x ,1基本项目构建 详解

程序员文章站 2022-07-07 20:22:50
1.先创建个文件夹 比如叫 webApp 用编译器打开 2.安装全局的webpack 和webpack-cli 及 webpack-dev-server 命令如下 npm install webpack webpack-cli webpack-dev-server -g 推荐安装个淘宝镜像 cnpm ......

1.先创建个文件夹 比如叫 webapp 

webpack4.x ,1基本项目构建 详解

用编译器打开

2.安装全局的webpack 和webpack-cli 及 webpack-dev-server 命令如下

npm install webpack webpack-cli webpack-dev-server -g  推荐安装个淘宝镜像 cnpm 这样下载速度更快 也能规避一下错误

操作列子使用的淘宝镜像 

webpack4.x ,1基本项目构建 详解

 

 点击回车等待安装完成

3.创建3个文件夹 分别是config dist src

webpack4.x ,1基本项目构建 详解

4.输入命令 npm init -y 创建package.json文件 

package.json初始内容

 

webpack4.x ,1基本项目构建 详解

 

5.创建index.htm和index.js 分别在dist和src文件夹下面创建 dist创建index.html src创建index.js

webpack4.x ,1基本项目构建 详解

6.webpack4.x中默认找src/index.js作为默认入口,所以现在就能开始打包了输入webpack进行简单打包

webpack4.x ,1基本项目构建 详解

 

 然后你会发现你多了一个node_modules文件和一个main.js文件

和webpack的警告

打包的时候输入webpack --mode=development或者webpack --mode=production就不会出现警告提示了

webpack --mode=development是开发环境 webpack --mode=production是生产环境

webpack4.x ,1基本项目构建 详解

 

 然后在用webpack --mode=production看一下区别

webpack4.x ,1基本项目构建 详解

 

 对比2张图片可以发现 它的体积变小了 所以明显这个代码是经过压缩后的

7.开始重头戏了 创建webpack的配置文件 在config文件夹下创建 webpack.dev.js

webpack4.x ,1基本项目构建 详解

8.然后删除dist下的main.js和 src下的index.js 自己进行手动配置

删除后目录

webpack4.x ,1基本项目构建 详解

 

 9.进入webpack.dev.js开始配置

入口js文件可以有多个逗号分隔

webpack4.x ,1基本项目构建 详解

修改package.json如下

webpack4.x ,1基本项目构建 详解

如果此时运行自定义命令 npm run build 就会报错

webpack4.x ,1基本项目构建 详解

因为没找到入口文件 所以需要在src下面创建main.js

webpack4.x ,1基本项目构建 详解

再次运行

webpack4.x ,1基本项目构建 详解

依旧报错 意思是命令不对

webpack4.x ,1基本项目构建 详解

webpack4.x ,1基本项目构建 详解

认真的小伙伴已经看出来了吧 修改package.json 把bulid改成build就可以了

webpack4.x ,1基本项目构建 详解

10.配置webpack-dev-server 配置项就是webpack.dev.js里面的devserver

配置如下:

webpack4.x ,1基本项目构建 详解

 

 有了这4个是webpack-dev-server的最基本配置 配置了他们就能启动服务看看效果了

输入webpack-dev-server --config=config/webpack.dev.js运行

webpack4.x ,1基本项目构建 详解

服务开启成功 地址为 http://localhost:3000/

webpack4.x ,1基本项目构建 详解

访问页面发现什么也没有

接下来我们修改dist目录下面的index.html

 webpack4.x ,1基本项目构建 详解

再次看一下页面

webpack4.x ,1基本项目构建 详解

引入src下的main.js

webpack4.x ,1基本项目构建 详解

 

 之所以在当前目录找 是因为入口文件上面已经有了路径

webpack4.x ,1基本项目构建 详解

js内编辑一行代码

webpack4.x ,1基本项目构建 详解

 查看页面

 webpack4.x ,1基本项目构建 详解

基本配置完成!!

11.配置css

webpack要配置css首先就要安装loaders

webpack4.x ,1基本项目构建 详解

安装成功后进入webpack.dev.js里面的module进行配置

webpack4.x ,1基本项目构建 详解

 

 然后创建个src下创建个css文件为main.css书写样式

webpack4.x ,1基本项目构建 详解

 

 在src/main.js中引入

webpack4.x ,1基本项目构建 详解

 

 

 在package.json里面配置启动命令

webpack4.x ,1基本项目构建 详解

 

 然后 npm run dev 启动服务

webpack4.x ,1基本项目构建 详解

 

 打开页面

webpack4.x ,1基本项目构建 详解

基本配置完成!!!