10分钟搞定新版webpack打包

入门前端这个职位近三年的时间了,但是脑子里的东西不多也不少,今天就从脑袋里把新版本的webpack打包过程拔出来给大家鲁一遍,就算帮助那些小白了,废话不多说,开始鲁起来,大家跟着我一起撸。。。

首先,去官网下载node.js  地址自己找度娘去,别那么懒!!!

一,我们在合适的位置创建一个文件夹,比如桌面,命名webapp

二,全局安装webpack,执行命令如下:     

             npm install -g webpack 

三 , 安装完成之后,我们开始创建项目,cmd切换到刚才创建的文件夹webapp,执行命令:

            npm init

        然后一路确定,最后yes,这时候文件里会多出来一个package.json的鸟玩意文件,

   

      一路确定,最后yes,最后生成了一个package.json的配置文件文件。它是用于保存项目信息的

四,安装全局webpack-cli

   npm install -g webpack-cli

        安装完之后输入:

   webpack --mode development

五,在根目录下创建src文件夹,并创建index.js

六,开始打包。执行命令

webpack --mode development
或者
webpack --mode production。

 不过每次都要输入这个命令,非常麻烦,我们在package.jsonscripts中加入两个成员:

"dev":"webpack --mode development",
 "build":"webpack --mode production"

以后我们只需要在命令行执行npm run dev便相当于执行webpack --mode development,执行npm run build便相当于执行webpack --mode production。 
我们在根目录执行:
npm run dev

好了,到这里你打包成功了吗、其中的原来有可能没说清楚。有时间优化吧。毕竟这个点有点晚了!!!!

猜你喜欢

转载自www.cnblogs.com/wanghuoya/p/9286431.html