创建基本的webpack项目

创建基本的webpack项目
学习前端已经一个多月了,从零基础入门,再到框架.可以说是浏览式的学习,准备这周末有时间将react框架再学习一遍,不仅仅只是学习理论,更加注重实战.跟着写写代码.
一.创建文件夹,导入vscode
二.运行npm init -y快速初始化项目
三.新建项目文件夹src和dist,分别存放项目源代码和项目做好发布原产品的地方
四.package.json里面存放下载安装的库和插件,在该文件都能找到纪录.
五.本次创建为从0开始创建,不同于将已有的项目运行跑起来,例如从GitHub上下载的项目,可能需要下载nodejs等
六.新建main.js,为webpack打包的入口文件
七.新建index.html.首页
八.项目写完,从main.js开始打包,自动引入
九.装webpack,命令cnpm i webpack -D,装完左sidebar出现node-modules;cnpm i webpack-cli -D安装命令,便于解析webpack,日后webpack直接打包构建

十.新建webpack.config.js文件,向外暴露打包对象.

十一.在src/index.js中输入项目代码,src/index.js默认为项目的入口地址.

十二.原来以前的webpack版本为src/main为项目入口地址,现在约定src/index为入口地址,将src/main改为src/index即可.
十三.在终端输入webpack命令,报错

十四.没有全局安装webpack和webpack-cli,
解决办法:按照以前的版本.找到项目根目录下的package.json文件并打开，找到"scripts":{}这一段，在其中添加"dev": "webpack"这一行，效果如下：

命令行中输入“npm run dev”命令，顺利执行webpack命令，将入口文件“src/index.js”打包（若是webpack.config.js中mode为production则自动压缩，否则不压缩，webpack 4.x以前要压缩的话需要另外安装组件并做相应配置，webpack 4.x仅需一个配置项即可压缩代码）并输出到“dist/main.js”.