Open yangleiqianduan opened 4 years ago
Issue-Label Bot is automatically applying the label feature_request
to this issue, with a confidence of 0.73. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!
Links: app homepage, dashboard and code for this bot.
在日常工作中的使用:
关联HTML(html-webpack-plugin)
主要有三个作用:
先安装html-webpack-plugin
npm install --save-dev html-webpack-plugin
然后加入webpack配置中:
通过 html-webpack-plugin 就可以将我们的页面和构建 JS 关联起来
构建CSS环境
上一章说明过,webpack 会默认把所有依赖打包成 js 文件。需要借助loader对文件进行源代码进行转换。
需要用到的loader是:
安装:
npm i css-loader mini-css-extract-plugin --save-dev
不用extract-text-webpack-plugin的原因:extract-text-webpack-plugin默认安装的版本是3.x.x,还不支持webpack的4.x版本
增加CSS预处理(sass,less,style)
处理JS文件
安装npm i uglifyjs-webpack-plugin --save-dev
uglifyjs-webpack-plugin不支持ES6,可以用
terser-webpack-plugin
替代处理图片文件
前边已经对css进行处理了,但是对于样式文件url()中的jpg/png/gig等是无法处理的,这里时候就需要用到另外的loader处理了。
url-loader 功能类似于 file-loader,但是在文件大小(单位 byte)低于指定的限制时,可以返回一个 DataURL
loader将图片处理成base64的格式
Babel支持JavaScript新特性
webpack-dev-server构建本地静态服务
配置scripts脚本
最后webpack的配置