手把手教你webpack4.x项目构建教程

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

用编译器打开

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

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

操作列子使用的淘宝镜像 

 点击回车等待安装完成

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

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

package.json初始内容

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

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

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

和webpack的警告

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

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

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

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

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

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

删除后目录

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

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

修改package.json如下

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

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

再次运行

依旧报错 意思是命令不对

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

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

配置如下：

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

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

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

访问页面发现什么也没有

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

再次看一下页面

引入src下的main.js

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

js内编辑一行代码

 查看页面

基本配置完成！！

11.配置css

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

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

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

 在src/main.js中引入

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

 然后 npm run dev 启动服务

 打开页面

基本配置完成！！！