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 启动服务
打开页面
基本配置完成！！！