webpack基本配置
1、安装node.js
打开cmd 运行node -v\npm -v 是否可以查看文件版本信息?
2、在某磁盘中创建空文件夹,例如:e:\webpack\webpack-test
3、使用vsCode工具中打开e:\webpack\webpack-test---------并打开终端
4、在终端中执行npm init 命令行,生成package.json文件
5、执行 npm install webpack --save-dev 命令行
node_modules\package-lock.json文件并在package.json文件中多一项配置
6、执行 npm install webpack-dev-server --save-dev 命令行,在package.json文件中多一项配置
7、执行 webpack -v 命令,检查webpack的版本
Webpack 4.x由于有兼容性问题,可以使用命令行npm i webpack@3.6.0 -g进行降级
再次执行 webpack -v 需要安装webpack cli,
并在package.json文件中生成配置信息:
再次执行webpack -v 命令,这时就是webpack 3.x
8、创建webpack.config.js 文件
9、在package.json的scripts里面添加webpack-dev-server服务脚本
10、创建main.js文件
11、创建index.html 文件
12、在项目目录下创建src文件夹,在src下创建index.js空文件;项目结构
13、在package.json文件中插入一条启动配置
14、最后执行:npm run dev 命令行,打开浏览器入口,并自动打包生成dist\main.js