首页 > Web开发 > 详细

webpack创建项目流程

时间:2020-02-14 23:25:25      阅读:59      评论:0      收藏:0      [点我收藏+]

先安装局部的webpack (局部的webpack只能在配置里调用,一般都是用局部的,因为不同的项目所依赖的webpack版本不一样)

npm install webpack@3.6.0 --save-dev  (--save-dev 是开发时依赖,项目打包后不需要继续使用的)

 

此时生成文件和文件夹:

技术分享图片

webpack还能全局安装 ,命令:npm install webpack@3.6.0 -g 全局安装不生成文件,可以在终端/命令行里面调用。这里我们使用的是局部的webpack

 

 

npm init 创建项目,生成package.json (npm管理包的文件)
npm install 安装依赖(安装配置文件所需的所有依赖)

此时生成文件:

技术分享图片

 

 

此时新建项目入口文件,与打包文件

技术分享图片

 

 src/index.js 是项目的入口,他将会被打包成dist/bundle.js(出口)

 

 

此时新建webpack config.js 即记录webpack打包的配置(入口文件,出口文件):

技术分享图片

 

 

 

 

配置命令:

技术分享图片

 

 此时,在终端输入:npm run bulid

它会自动执行 webpack,由于webpack命令是写在配置里的,所有优先找本地的webpack(即局部webpack),所以找到了./node_modules/webpack

webpack会找到webpack.config.js文件得到配置,然后执行打包

 

 

打包成功:

技术分享图片

 

 

 

总的来说,webpack就是打包工具,package(项目)就是运行环境与依赖

webpack创建项目流程

原文:https://www.cnblogs.com/cl94/p/12310136.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!