10分钟搞定webpack打包

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

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

 

 

一,我们在合适的位置创建一个文件夹,比如桌面,命名webapp,然后进入这个文件夹按着shift+鼠标右键,点击  “在此处打开命令窗口”

      初始化项目,输入:

      npm init

      一路按enter键即可

      

二, 接下来安装webpack

       (1) 全局安装webpack ,我们在命令行输入: npm install -g webpack

  (2) 通常我们会将webpack安装到项目依赖,这样就可以使用本地版本的webpack,我们在命令行输入: npm install webpack --save-dev

三,安装 webpack-cli 

    npm install -g webpack-cli  

四 ,设置模式

webpack --mode development

五,创建入口文件

根目录下创建src,并添加入口index.js文件,必须命名index.js,否侧会报错

六,配置
我们在package.jsonscripts中加入两个成员:
   "dev":"webpack --mode development",
    "build":"webpack --mode production"


全局安装webpack-cli
npm -i webpack-cli -g  或者 npm install webpack-cli 
   本地安装:
  npm install webpack -D

七 , 打包

npm run build
//接着输入 webpack-cli 或者 webpack-command 即可
在项目中是不是生成了dist/main.js
将文件引入index。html看看效果吧
 

 

 

 

posted @ 2018-07-09 22:20  砍刀哥  阅读(11051)  评论(0编辑  收藏  举报