阅读 521

webpack4.0--如何安装和配置(一)

前言

一直计划想把webpack系统的学一遍,现在终于开始了,接下来会分享我从零开始学习的过程,记录自己,分享他人,这篇文章主要分享安装和配置,也就是文档中Getting Started的学习。


如何安装webpack

  1. 环境配置:在学习webpack之前,先配置一下node环境,下载node,傻瓜式安装就行了,最好是选择稳定版本的node,不要选择最新版本的。在这里我的版本是v10.15.3版本
  2. 在桌面中创建webpack-demo文件夹,命令创建:mkdir webpack-demo 进入webpack-demo文件夹
  3. 进入文件夹后初始化这个项目,命令:npm init

    初始化后会有很多配置项,名字、版本、描述,可以不用管一路回车创建就行了,文档中也有提到,如果你不想填写这些配置,那就执行npm init -y就可以

  4. 在编辑器里面打开项目,在这里我进行了增删改的操作,因为目前有些东西用不到也不需要,原有的样子

    整理后:private的配置意思是私有项目,不会上传到npm库里。


  5. 初始化完毕之后开始安装webpack,有两种方式安装webpack
    第一种:全局安装,命令:npm install webpack webpack-cli -g  安装webpack同时安装webpack-cli工具(安装webpack-cli的作用就是能让webpack打包命令顺利执行)
  6. 注意:一般不要去安装全局,因为你不可能所在公司的所有项目webpack都是一个版本,但是如果你要是启动两个以上的项目的话由于版本不一样肯定会遇到项目无法启动的问题,所以还是在本项目中去安装比较好
    删除全局webpack命令:npm uninstall webpack webpack-cli -g  这样就删除了,查看版本也找不到了   

    第二种:项目安装,命令:npm install webpack webpack-cli --save-dev 或者直接-D
    我这里的webpack版本是4.31.0,可以根据npm install webpack@版本号 webpack-cli -D 安装自己指定的版本
    查看项目



手动配置文件

  1. 在根目录创建webpack.config.js文件(wenbpack在打包的时候回去默认寻找这个文件,如果不是这个文件名,那么打包过程就会报错,当然你也可以改变这个默认文件,你可以执行npx webpack --config  你想起的名字.js,这样打包的时候webpack就会去寻找你想设置的配置文件)


    注意:__dirname是两个下划线
  2. 执行npx webpack 命令进行打包


  3. 其实你也可以设置成类似vue那种执行 npm run build 那种进行打包,但是需要配置一下


  4. 打包后整理文件,无报错


总结

以上就是webpack4版本的开始安装和简单的配置,通俗易懂,如果你也想学习webpack4,你可以关注我,我们一起学习,这只是一个开始,后期每周至少更新一篇(因为最近工作比较紧张,所以我只能抽时间去学习和写文章),持续更新中~~~~~~~~~给个小小的赞让我们不断前行吧!!!