webpack4.x 学习笔记

  • A+
所属分类:前端

前言

近来学习webpack,发现网上很多教程都有问题了,看了下webpack4出了以后,一些插件变化很大,和之前的版本使用方式不一样,所以很多地方都有差别。新手入坑,记录下自己如何从一开始配置webpack4的开发版本,对css,js进行编译打包合并生成md5,CSS中的图片处理,js自动注入html页,删除指定文件,提取公共文件,热更新等等。

安装

创建文件夹初始化

创建文件夹scripts 并在里面创建index.js文件

index.js

创建webpack.config.js文件

webpack.config.js

执行webpack --mode development将会生成dist/index.bundle.js

webpack --mode development
webpack4.x 学习笔记

创建index.html,并引入js

打开浏览器将会看到之前设置的js文件生效
对css,js进行编译打包合并生成md5
创建a.js,c.js,a.css,更改index.js

a.js

c.js

a.css

index.js

配置webpack.config.js文件

webpack.config.js

安装style-loader, css-loader

打包style需要对应的插件,有需要单独安装

执行webpack --mode development将会看到一个带md5值得js文件,将他引入html中

webpack4.x 学习笔记

上面就是webpack最基础的使用方法了。
可是这样就能愉快的开车了吗?答案是否定的,因为这样的话,你可能会发现css中的背景图片并不会被打包,那该怎样做呢?
首先还是向上面一样,你必须要安装打包图片的模块

CSS中的图片处理

安装url-loader, file-loader

修改a.css 将一张图片放到scripts目录

配置webpack.config.js文件

执行webpack --mode development将会看到dist中有一个images文件夹中有一张图片,打开index.html

webpack4.x 学习笔记

现在图片就已经能打包了。

不知道大家有没有思考过,如果要往html文件引入更多js,每次都需要去手写balabala一大堆吗?有没有更简单的方式呢?(哈哈,不要走开,广告之后为大家揭晓~)

js自动注入html文件

答案就是使用插件html-webpack-plugin,可以将生成的js自动引入html页面,不用再手动去添加了。
当然,还是得先安装对应的模块:

避免不了的也要配置webpack.config.js文件

执行webpack --mode development, 记得要讲之前手动引入的script删除,便可以看到dist那里自动生成一个index.html,打开便可以看到文件被自动引入了。

提取公共文件,减少你的代码冗余

我们可看到a.js和index.js都引入了c.js文件,为什么要提取公共代码,简单来说,就是减少代码冗余,提高加载速度。和之前的webpack配置不一样:

下载jq , 在a.js,index.js引用 import $ from 'jquery' 输出

webpack4.x 学习笔记
webpack4.x 学习笔记

生成3个js文件,执行webpack --mode development

热更新,自动刷新

我们将用到webpack-dev-serve,webpack-dev-server就是一个基于Node.js和webpack的一个小型服务器,它有强大的自动刷新和热替换功能。
工欲善其事必先利其器,首先安装webpack-dev-serve:

你懂得配置webpack.config.js文件:

配置package.json:

执行npm run dev 访问 http://localhost:9090/

webpack4.x 学习笔记
随便修改任一文件便会自动刷新网站显示修改相应内容。

总结:

webpack4还有很多很多配置,例如css的拆分呀,less sass配置呀,js编译es6呀,多入口配置呀,生产环境配置,js没有使用的模块自动检测剥离等等,等以后的学习中将慢慢研究这些用法,新手入坑,欢迎大家指出错误的地方。

过程中可能会遇到的问题:

moudule.js:338 throw err; Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'moudule.js:338 throw err; Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'

我查了一些资料,是因为全局安装webpack,导致的。

解决方法:
1,可以在本项目中安装,npm install webpack

2, 或者是,在~/.bash_profile中添加如下设置: export NODE_PATH="/usr/local/lib/node_modules" 保存退出。

(.bash_profile这个是隐藏文件,或者是配置文件,那怎么进入这个文件哪?

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: