一、使用webpack

vue、react、less、scss等语法进行开发项目但是浏览器只能识别

一、使用webpack

mode模式主要由两种模式开发模式development、生产模式production

根目录新建

因为我们是将css引入到入口文件里面一般情况下js是不能识别css

npm

initial-scale1.0titleDocument/title

/head

因为有一张图片是2kb的每次访问都需要去进行请求资源我们可以把小于

加载器module:

/\.(png|jpe?g|gif|webp)$/,type:

asset,parser:

当然我们希望打包后的js在一个文件中本地资源又在另一个文件中。

output:

static/imgs/[hash:8][ext][query],},},,},],

打包结果

若不做当前处理如果有相同会默认替换如有更新会自动新增不删除原来打包文件。

output:

static/media/[hash:8][ext][query],},},]

type:

其他规则详见https://eslint.bootcss.com/docs/user-guide/configuring

parserOptions

https://eslint.bootcss.com/docs/rules/eqeqeq#smart

extends

require(eslint-webpack-plugin);module.exports

{plugins:

在src目录下写一个带有var声明变量的代码就会提示如果没下载则打包编译时会有报错提示。

忽略eslint文件检查

webpack-dev-server就可以在本地服务器开启一个端口号进行自动化更新

npm

require(mini-css-extract-plugin);module.exports

{module:

require(css-minimizer-webpack-plugin);module.exports

{//

在修改某个文件进行打包时并不希望他是全部更新的我修改了哪些就应该更新哪些文件

module.exports

{module.hot.accept(./js/one.js);//

第二个参数额外执行的事件module.hot.accept(./js/sum.js,

function

正则原因实际没有处理上但是都要过一遍。

比较慢。

如果匹配上一个就不需要再次匹配了。

在rules新增

//新增对象oneOf[{},{...一堆loader}]}]

17.Cache

[babel/preset-env],cacheDirectory:

true,

__dirname,./node_modules/.cache/.eslintcache

),})

require(image-minimizer-webpack-plugin);module.export

optimization:

ImageMinimizerPlugin({minimizer:

{implementation:

ImageMinimizerPlugin.imageminGenerate,options:

{plugins:

[preset-default,prefixIds,{name:

sortAttrs,params:

alphabetical,},},],},],],},},}),]},

只有在生产模式下打包是生效的。

当批量图片压缩是比较方便也可以手动找网站进行压缩。

当然webpack配置还有很多