1----在完成项目中Git的初始化后,我们需要开始搭建项目的目录结构,一般情况下目录结构如下:
这是目录的基本样式,而随着npm的不断追加plugin信息,都会维护在package.json!
webpack则负责对插件信息进行加载,或者规模化处理,这也是webpack的目标!
2-----NPM初始化,npm是项目中用于统一下载插件或者jar包的工具,类似于后端开发的maven
安装:npm install ----------如果没有则安装(时间超级长)
启动:npm start ----------启动npm,如果没有初始化仍然会报错,需要先执行初始化,如果初始化后无法启动,见下框:
初始:npm init -----------这一步也是生成package.json初始项目包的过程
全局更新 npm install npm -g 或者用淘宝镜像命令 cnpm install npm -g |
3------关于webpack使用的插件信息(看webpack.configjs):
安装1:npm install webpack -g ---------------全局性安装用于垫底的项目包
安装2:npm install webpack@xxxx --save-dev -----------------用于项目本身,如果有需要也可以通过设置版本,但一般忽略
提示:当安装完webpack后目录结构会出现package-lock.json,该文件记录需要被成功安装的各种webpack的版本和参数,并且会出现一个 node_modules的文件夹作为就近调用的jar包!
4-----执行流程和追加webpack依赖和插件,如下:
npm的本质是对项目进行管理,而webpack的本质是对项目进行模块化管理,模块化处理后的 项目将会有统一的入口,统一的公关代码,两者的合作可以大幅度地提高效率!
入口文件:webpack.config.js作为入口文件,用于配置各种插件与加载各类插件,调用各类插件!
安装插件: 对于有需要的插件,可以利用npm项目管理工具进行下载:npm install xxxx1 xxxx2 --save-dev
npm install 在安装 npm 包时,有两种命令参数可以把它们的信息写入 package.json 文件,一个是npm install --save : --------------------------运行时候依赖:发布后项目运行需要 --save-dev --------------------------开发时依赖:发布后项目运行不需要 npm instal --------------------------开发运行双需要 |
5-----常用的一些依赖命令:
服务器代理:npm install webpack-dev-server --save-dev 简便化追加:npm install hogan --save-dev 图标与字体:npm install font-awesome --save |
启动webpack
6------异常修复:
webpack常见的报错模式都是前面面描述,在描述后面附属上属于该项目的依赖出错的名字,据此我们可以找到依赖名称:
依赖报错:npm install extract-text-webpack-plugin@next ----------------寻找合适版本
提示:读报错信息
7------部署与启动
打包:webpack -mode development ----------------进行开发环境的打包
启动: npm run start 或者 npm run-script start需要在package.json的 scripts 中定义start为字段的命令
"scripts": {
"start": "webpack-dev-server --hot"
},
访问:打包成功后,webpack会提供一个路径作为访问的路径,并由此实现热部署与实时刷新!