小白使用的es6 最基本的配置步骤

第一步,wind+r  快捷键cmd  命令进入操作界面(webpack4.0版本以上)

确保node已经安装 

1.首先全局安装好webpack

npm install webpack webpack-cli webpack-dev-server -g

安装成功

2.新建项目文件,打开并进入

mkdir  escs

cd escs

3.安装package.json

npm init -y

-y安装比较简洁方便,当然也可以不加这个


4.本店安装(按张道当前项目)

npm install webpack webpack-cli webpack-dev-server -D

安装成功如下:本段代码报错可以忽略,这里是由于fsevents不在package.json里,但是仍然安装了,由于你的系统是Windows系统,fsevents是苹果系统的可选依赖,你的项目有可能是团队项目,别人在他的mac上安装了fsevents相关依赖库,所以到这边你也就安装到你的windows上边了。你可以检查你的package.json 文件中是不是有fsevents相关依赖,删除即好!

如果没有,删除node_modules文件夹,重新安装各项依赖就好了,当然不理他,也没有关系

小白使用的es6 最基本的配置步骤_第1张图片

5.新建文件夹public 和src和webpack.config.js文件  webpack  src下新建文件index.html  index.js  js文件夹  

大致如下

小白使用的es6 最基本的配置步骤_第2张图片

对webpack.config.js进行出入口配置


小白使用的es6 最基本的配置步骤_第3张图片

js文件夹下新建测试文件cs.js

写上代码进行测试


index.js文件写上输入  import './js/cs'


到此此处检查出入口设置是否成功,打包一下就好

webpack --mode=production

你会发现原来空着public文件下生成了js文件夹,以及文件index.js


查看代码:发现成功



6.安装时时刷新

npm install webpack-dev-server -D

代码配置对webpack.config.js进行配置


package.json设置

小白使用的es6 最基本的配置步骤_第4张图片

运行命令  npm run dev  ,回到自动打开浏览器


5.安装plugin

npm  install  html-webpack-plugin -D

模块导入webpack.config.js 文件


小白使用的es6 最基本的配置步骤_第5张图片

错误集锦:https://blog.csdn.net/intzhou/article/details/81677269

你可能感兴趣的:(小白使用的es6 最基本的配置步骤)