module: {
rules: [
{
test: /.(png|jpg)$/,
use: [
{
loader: ‘url-loader’,
options: {
name: ‘[name]_[hash].[ext]’,
outputPath: ‘images’,
limit: 40210 }
}
]
},{
test: /.scss$/,
use: [
‘style-loader’,
{
loader: ‘css-loader’,
// options: {
// importLoaders: 2,
// modules: true
// }
},
‘sass-loader’
]
},{
test: /.(eot|ttf|woff|woff2)$/,
use:{
loader: ‘file-loader’
}
}
]
},
output: {
filename: “[name].js”,
path: path.resolve(__dirname, “dist”)
}
}
对于plugin可以这样来理解,webpack在运行到某个时候,帮你做的一些事情。这就好比在vue或者是react中的生命周期函数一样,在组件加载在某个时刻就执行对应的生命周期函数
-
在使用之前需要引入依赖包,引入依赖包可以通过npm或者是yarn来引入。
-
插件作用,会帮助生成一个html文件,并将打包好的js文件自动添加到这个html文件中,但是默认生成的html模板里面没有任何的结构,因此在使用时,需要引入自己定义好的html文件模板,此时只需要在实例中,传入一个实例对象,对象的属性名为template,属性值为文件的路径。需要注意的是,该插件运行的时间是在webpack打包完成之后才进行
-
插件引入方式,在使用之前需要引入依赖包,引入依赖包可以通过npm或者是yarn来引入
-
插件作用,会在打包之前,去清除掉之前打包好的文件,在官方引入中引入的方式的方式是通过import {} from ‘’;的方式,在实例化的过程中也不需要去传入文件名的参数
关于output与entry在上面已经说过了,在这里需要对entry的两个配置参数做说明
对于entry这个参数,其对应的的属性值有两种传入参数的方式
-
如果传入的是单个文件,此时该参数可以是字符串,如果output中的传入的对象没有配置时,此时输出打包后的文件名为main.js;如果使用了filename这个属性,那么最后打包输出的名称为filename的属性值。
-
如果入口文件是两个及其以上,那么配置entry的参数的属性值,为一个对象,在该对象的内部传入的属性,与属性值分别代表的意思就是打包后生成的文件的文件名,以及打包的入口地址,那么与此对应的output中,filename的属性值,就可以写成[name].js或者用[hash]_[name].js等方式,来说明有多个文件的引入
publicPath参数说明
该参数表示生成的打包好的文件,可以在一个相同域名下的文件中,如: ‘http://cdn.com.cn’,则此时就需要在output中新增publicPath: ‘http://cdn.com.cn’,在这里需要注意下,使用该参数时不能乱用,否则会出现路径错误
-
sourceMap的作用,用于去检测打包生成后的bug检测,其表示一种映射关系,用于指出产生错误的源文件的位值
-
devtool参数的说明
-
none:能够指出打包生成后的文件的错误代码的位置,但是不能指出源文件出错代码的错误
-
source-map: 能够找出源文件错误,但是会生成.map的文件
-
inline会将.map文件嵌入到打包生成的文件
-
module能够映射出模块、插件等这些依赖包中的问题
-
cheap 不会精确到列中的错误
-
eval 包裹模块代码
-
通常情况下各环境中推荐的参数
-
production下使用devtool: ‘cheap-module-eval-source-map’
-
development下使用devtool: ‘cheap-module-source-map’
对于webpack自动启动服务的方式有三种方式,如下所示
-
在webpack中的script下配置webpack --watch参数,但是这样做的不能实现自动刷新
-
使用devServer,能够启动界面,并且能完成自动刷新,并且启动时是在http协议下,即本地的服务器启动,此时需要在script下配置webpack-dev-server,同时还需要安装webpack-dev-server这个依赖。devserver的参数说明
-
contentBase用于指明打包生成的文件的位置
-
port用于说明启动端口的位置,默认指的是8080
-
proxy用于指明,当转到某个路由时,自动跳转到某个地址
-
使用node手动配置devserver,使用webpack-dev-middleware中间件启动
- 作用:当重新刷新界面时,可以使得刷新后的界面,保存之前的一些操作,只更改某些操作
-
对于css而言,当使用Hot Module Replacement后,可以更新其所有的内容,但是对于js的操作,会保存前一次的更新
-
对于js而言,可以一些操作,去检测到某个模块改变之后的状态
- 配置方式
-
首先需要在devServer中去配置hot参数设置为true,hotOnly参数设置为true
-
引入webpack,然后plugins中新增webpack.HotModuleReplacement()实例
plugin所涉及到webpack.config.js中的配置内容
const path = require(‘path’);
const htmlWebpackPlugin = require(‘html-webpack-plugin’);
const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’);
const webapck = require(‘webpack’);
module.exports = {
mode: ‘development’,
devtool: ‘cheap-module-eval-source-map’,
entry: {
main: ‘./src/index.js’
},
devServer: {
// contentBase: path.join(__dirname, ‘dist’),
contentBase: ‘./dist’,
open: true,
proxy: {
‘/api’: “http://localhost:3000”
},
hot: true,
hotOnly: true
},
module: {
rules: [{
test: /.css$/,
use:[‘style-loader’,‘css-loader’]
}]
},
plugins: [
new webapck.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(),
new htmlWebpackPlugin({
template: ‘src/index.html’
})],
output: {
publicPath: ‘/’,
filename: ‘[name].js’,
path: path.resolve(__dirname, ‘dist/’)
}
}
对于babel只需要知道的就是其能够将高级的es6及其es6以上的语法,转换为es5或者是es5一下的语法,这样做的原因是因为的一些浏览器对于这些高级语法不支持,只能支持低版本的语法
作为一个桥梁,将本地的js文件与babel库连接起来
是一个babel的核心库,里面是关于所有的js中es6部分转为es5中的核心内容
如果只是这种默认情况的话,用于es6转为es5的语法,对于es5中的有一些语法还是不能够被低版本的浏览器识别,如果要使得低版本的浏览器也能够识别就得使用Babel中的polyfill
-
作用:对于一些低版本的浏览器,其不支持es5的语法,这时就使该库,将es5转为浏览器能够识别的语法规则,在这里使用可以使用useBuiltIns,其目的是为了实现按需加载的要求,不必要将所有的代码都进行转化,这样就能在性能上做到极大的优化
-
缺点:这种方式来实现转义会造成全局污染,当遇到类库或者是组件库的开发时,应该换另外的方式来实现,target参数作用,设置需要进行转义的浏览器的版本信息
其具体的使用方式如下:
-
安装@babel/polyfill与@babel/preset-env这两个依赖
-
在optios中配置presets参数,其参数值为 [[’@babel/preset-env’,{ targets: {chrome: “67”}useBuiltIns: ‘usage’}]]
-
最后在需要转义的js文件中全局引入@babel/polyfill,具体为import ‘@babel/polyfill’
-
注意:当在preset-env中设置了useBuiltIns时,是可以不用在js中引入import ‘@babel/polyfill’
@babel/plugin-transform-runtime
该插件的作用与polyfill的作用类似,但其弥补了polyfill的缺点,当遇到类库或者是组件库的开发时,就可以使用这种方式来对项目进行开发,具体的使用方式如下:
-
首先安装@babel/plugin-transform-runtime和@babel/runtime两个库
-
然后对其进行配置配置参数如webpack.config.js文件中所示
-
当"corejs"的值为2时,还需要安装依赖@babel/runtime-corejs2
-
最后对其进行打包即可完成所需要的配置
-
在根目录下去创建.babelrc文件夹
-
将options的文件夹中的配置内容放入到该文件中,并采用json配置的格式
-
删除掉在webpack.config.js文件中的optios参数即可
-
首先安装react与react-dom的依赖包
-
其次是安装@babel/preset-react,用于去解析jsx语法
-
在babelrc中配置参数,增加@babel/preset-react依赖包
总结
对于webpack的基础大概就是这样,这些都是常用的loader、plugin以及babel。对于其他的一些内容可以去官网查询使用,引文webpack中的loader与plugin是非常的多,对于具体的应该场景需要不同的loader与plugin,这时就可以在网上的博客中去看或者是在一些群里问大佬,这样就能在实际中锻炼自己的webpack使用能力。这里加一个自己在用到上述内容时的github地址,在里面就是对于上面所说的配置的应用。https://github.com/whocareit/webpack,对于webpack中的一些其他高级应用,待自己学完后再总结。
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。**
[外链图片转存中…(img-7ZoB67Nx-1715708538854)]
[外链图片转存中…(img-V9fXUeb3-1715708538855)]
[外链图片转存中…(img-80a5fNX3-1715708538855)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!