![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
爱喝冬瓜汤的外星人
很懒
展开
-
安装配置image-webpack-loader疯狂报错!!!!
从npm官网安装并且配置在打包的时候疯狂报错,看不懂的那种。。。。解决方法:cnpm install image-webpack-loader --save-dev好了。。。原创 2020-05-30 16:41:25 · 1668 阅读 · 0 评论 -
webpack-babel配置-兼容低版本浏览器
1.webpack-ES6语法处理在企业开发中为了兼容一些低级版本的浏览器, 我们需要将ES678高级语法转换为ES5低级语法否则在低级版本浏览器中我们的程序无法正确执行,默认情况下webpack是不会将我们的代码转换成ES5低级语法的, 如果需要转换我们需要使用babel来转换2.如何使用babel?https://babeljs.io/2.1安装转换到ES5的相关包npm install --save-dev babel-loader @babel/core @babel/preset-e原创 2020-05-30 13:43:42 · 3729 阅读 · 2 评论 -
webpack-热更新插件
Q:为什么要使用热更新插件?A:为了不刷新网页还能监听文件变化1.什么是HMR?1.1通过webpack-dev-server自动打包并没有真正的放到指定的目录中因为读写磁盘是非常耗时和消耗性能的,所以为了提升性能webpack-dev-server将转换好的内容直接放到了内存中1.2通过webpack-dev-server可以实现实时监听打包内容的变化,每次打包之后都会自动刷新网页, 但是正是因为每当内容被修改时都会自动刷新网页所以给我们带来了很多不便, 这时就需要通过HMR插件来优化调试原创 2020-05-30 11:53:57 · 515 阅读 · 0 评论 -
webpack-watch与devSever-CORS
1.什么是watch?webpack 可以监听打包文件变化,当它们修改后会重新编译打包那么如何监听打包文件变化呢? 使用 watch2.watch相关配置watchOptionspoll: 1000 // 每隔多少时间检查一次变动aggregateTimeout: // 防抖, 和函数防抖一样, 改变过程中不重新打包, 只有改变完成指定时间后才打包ignored: 排除一些巨大的文件夹, 不需要监控的文件夹, 例如 node_modules//webpack.config.jsmodu原创 2020-05-23 16:47:02 · 569 阅读 · 0 评论 -
webpack-css-plugin配置以及css的压缩
Q:都配置了css-loader,为什么还要配置css的plugin?在使用css-loader的时候,打包之后css是被style-loader直接插入到head标签里面,并没有css单独的文件生成,使用css-plugin的目的是生成单独的css文件并自动将css文件引入1.安装https://webpack.js.org/plugins/mini-css-extract-plugin/2.配置//webpack.config.jsconst MiniCssExtractPlugin = r原创 2020-05-23 16:04:09 · 741 阅读 · 0 评论 -
copy-webpack-plugin配置以及遇到的问题
1.什么是copy-webpack-plugin?在打包项目的时候除了JS/CSS/图片/字体图标等需要打包以外, 可能还有一些相关的文档也需要打包文档内容是固定不变的, 我们只需要将对应的文件拷贝到打包目录中即可那么这个时候我们就可以使用copy-plugin来实现文件的拷贝2.copy-webpack-plugin使用https://www.webpackjs.com/plugins/copy-webpack-plugin/2.1安装copy-webpack-pluginnpm insta原创 2020-05-23 14:36:02 · 7402 阅读 · 0 评论 -
webpack-clean-plugin
1.什么是clean-webpack-plugin?webpack-clean-plugin会在打包之前将我们指定的文件夹清空应用场景每次打包前将dist目录清空, 然后再存放新打包的内容, 避免新老混淆问题2.clean-webpack-plugin使用https://github.com/johnagan/clean-webpack-plugin2.1安装clean-webpack-pluginnpm install --save-dev clean-webpack-plugin2.2配置原创 2020-05-22 19:54:12 · 430 阅读 · 0 评论 -
webpack-html-plugin
1.什么是插件(plugin)?plugin 用于扩展webpack的功能当然loader也是变相的扩展了webpack ,但是它只专注于转化文件这一个领域。而plugin的功能更加的丰富,而不仅局限于资源的加载。2.什么是HtmlWebpackPlugin?HtmlWebpackPlugin会在打包结束之后自动创建一个index.html, 并将打包好的JS自动引入到这个文件中3.HtmlWebpackPlugin使用https://www.webpackjs.com/plugins/htm原创 2020-05-22 19:15:53 · 518 阅读 · 0 评论 -
postcss-loader
1.什么是PostCSS?https://www.postcss.com.cn/PostCSS和sass/less不同, 它不是CSS预处理器PostCSS是一款使用插件去转换CSS的工具,PostCSS有许多非常好用的插件例如autoprefixer(自动补全浏览器前缀)postcss-pxtorem(自动把px代为转换成rem)… …2.使用PostCSS自动补全浏览器前缀2.1安装postcss-loadernpm i -D postcss-loader2.2安装需要的插件n原创 2020-05-21 21:55:05 · 9457 阅读 · 0 评论 -
less-loader和sass-loader
less-loader1.less-loader自动将less转换为CSS2.less-loader使用:2.0安装lessnpm install --save-dev less2.1安装less-loadernpm install --save-dev less-loader2.2配置less-loader{test: /.less$/,use: [{loader: “style-loader”}, {loader: “css-loader”}, {loader: “les原创 2020-05-21 12:05:39 · 2422 阅读 · 0 评论 -
前端模块化(node、ES6)
node模块化ES6模块化ES6模块化的第一种方式导出数据:export { xxx };导入数据:import { xxx } from ‘path’注意点:1.如果是通过export {xxx} 的方式导出数据,那么在导入接受数据的时候,接收的变量名必须和导出的变量名保持一致,如果不一致则拿不到变量,究其原因,是因为在导入的时候的本质是ES6的解构赋值//回顾解构赋值let obj = { name:'andy', age:22};let {name,age} = obj原创 2020-05-21 01:17:08 · 221 阅读 · 0 评论 -
webpack-loader的注意点(特点)
1.什么是loader?webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。2.使用loader的特点2.1单一原则一个loader只做一件事情2.2多个loader会按照从右至左、从下到上的顺序执行例如: 从右至左[ ‘style-loader’, ‘css-loader’ ]先执行css-loader解析css文件关系拿到所有内容,再执行style-loader将原创 2020-05-19 23:45:41 · 567 阅读 · 0 评论 -
webpack-css-loader以及css-loader模块化
1.什么是css-loader和图片一样webpack默认能不能处理CSS文件, 所以也需要借助loader将CSS文件转换为webpack能够处理的类型2.css-loader使用:2.1安装cssloadernpm install --save-dev css-loader2.2安装styleloadernpm install style-loader --save-dev2.3配置css-loader{ test: /\.css$/, use: [ 'style-loa原创 2020-05-19 23:40:37 · 455 阅读 · 0 评论 -
webpack-urlloader的配置与注意点
1.什么是urlloaderurl-loader 功能类似于 file-loader,但是在文件大小(单位 byte)低于指定的限制时,可以返回一个 DataURL(同file-loader)2.urlloader使用https://www.webpackjs.com/loaders/url-loader/2.1安装urlloadernpm install --save-dev url-loader2.2配置urlloader{ test: /\.(png|jpg|gif)$/,原创 2020-05-19 23:05:08 · 406 阅读 · 0 评论 -
webpack-file-loader
1.什么是loader?webpack的本质是一个模块打包工具, 所以webpack默认只能处理JS文件,不能处理其他文件,因为其他文件中没有模块的概念, 但是在企业开发中我们除了需要对JS进行打包以外,还有可能需要对图片/CSS等进行打包, 所以为了能够让webpack能够对其它的文件类型进行打包,在打包之前就必须将其它类型文件转换为webpack能够识别处理的模块,用于将其它类型文件转换为webpack能够识别处理模块的工具我们就称之为loader2.如何使用loaderwebpack中的原创 2020-05-18 13:49:57 · 2032 阅读 · 0 评论 -
webpack-sourcemap
1.什么是sourcemap?webpack打包后的文件会自动添加很多代码, 在开发过程中非常不利于我们去调试因为如果运行webpack打包后的代码,错误提示的内容也是打包后文件的内容所以为了降低调试的难度, 提高错误代码的阅读性, 我们就需要知道打包后代码和打包之前代码的映射关系只要有了这个映射关系我们就能很好的显示错误提示的内容, 存储这个映射关系的文件我们就称之为sourcemap2.如何开启sourcemaphttps://www.webpackjs.com/configuration/原创 2020-05-18 13:04:02 · 283 阅读 · 0 评论 -
webpack-配置文件及注意点
1.什么是webpack配置文件?我们在打包JS文件的时候需要输入: npx webpack index.js这句指令的含义是: 利用webpack将index.js和它依赖的模块打包到一个文件中其实在webpack指令中除了可以通过命令行的方式告诉webpack需要打包哪个文件以外,还可以通过配置文件的方式告诉webpack需要打包哪个文件2.webpack常见配置(webpack.config.js)mode: 打包模式 development/productiondevelopmen原创 2020-05-17 15:01:46 · 268 阅读 · 0 评论 -
什么是webpack
1.什么是webpack?webpack是一套基于NodeJS的"模块打包工具",在webpack刚推出的时候就是一个单纯的JS模块打包工具,可以将多个模块的JS文件合并打包到一个文件中但是随着时间的推移、众多开发者的追捧和众多开发者的贡献现在webpack不仅仅能够打包JS模块, 还可以打包CSS/LESS/SCSS/图片等其它文件2.为什么要分模块?如果将所有的JS代码都写到一个文件中, 十分不利于代码的维护和复用所以我们可以将不同的功能写到不同的模块中, 这样就提升了代码的维护性和复用性原创 2020-05-17 14:34:30 · 215 阅读 · 0 评论