webpack
文章平均质量分 67
~往无前
这个作者很懒,什么都没留下…
展开
-
webpack内容详解
{ test:/\.js$/, //排除node_modules下的js文件 exclude:/node_modules/, //只检查src下的js文件 include:resolve(__dirname,'src'), //优先执行 enforce:'pre',原创 2021-05-02 21:13:29 · 416 阅读 · 0 评论 -
webpack优化环境配置
一、webpack性能优化概述开发环境性能优化生产环境性能优化1.1开发环境性能优化优化打包构建速度HMR优化代码调试source-map1.2生产环境性能优化优化打包构建速度oneOfbabel缓存多进程打包externalsdll优化代码运行的性能缓存(hash-chunkhash-content)tree shakingcode split懒加载/预加载pwa二 、开发环境webpack性能优化2.1 优化打包构建速度原创 2021-05-02 20:55:51 · 192 阅读 · 0 评论 -
webpack 生产环境相关
webpack生产环境配置就是当代码上线时保证可以正常运行。之前我我们提到的Babel,以及将css文件打包成单独文件的插件都是生产环境的配置。一、CSS兼容性处理1.安装 npm install postcss-loder postcss-preset-nev --save2.文件配置改配置必须在css-loader之前掉用 rules:[ { test:/\.css$/, use:[ .原创 2021-05-02 09:38:28 · 143 阅读 · 0 评论 -
webpack开发环境配置相关
所谓的开发环境配置就是指在进行打包的时候,只有在程序员开发的时候用得到,一旦上线这些配置将无用。这就是开发环境配置,这个配置,可以极大的提高程序员的开发效率。一、html-webpack-plugin这是要一个用来导出的html文件的插件,并且可以将导出的的js文件自动的引入到该文件中,一般该文件导出到导出目录中。1.安装插件:npm installl html-webpack-plugin -D2.文件配置 entry:{ 'first':'./src/index.j.原创 2021-05-02 08:59:04 · 142 阅读 · 0 评论 -
webpack处理javascript兼容性--Babel
.package允许你使用Babel和webpack转译JavaScript文件。因为javaScript的版本一直都在更新迭代,所以需要转译为浏览器可认识的文件内容,经常来说,我们会将ES6转换成ES5。一、Babel初使用1.基本兼容性处理1.1安装包 npm install babel-loader balel/core babel/preset-env -D1.1配置文件 { test:/\.js$/, exclude:原创 2021-05-01 22:14:25 · 653 阅读 · 2 评论 -
webpack打包其他资源文件
一、什么是loader?从webpack本身来说,主要是用作处理我们写的js代码,并且webpack会处理js之间的依赖。但是,在开发中我们不仅仅有基本的js代码处理,我们也需要加载css,图片,也包括一些高级的ES6转成ES5代码,将TypesScript代码庄臣ES5代码,将scss,less,转成css,将.jsx,.vue文件转成js文件等等。对于 webpack本身的能力来说,对于这些转化是不支持的。这时候我们就可以给webpack扩展对应的loader就可以了。loader让webpac原创 2021-05-01 18:06:33 · 359 阅读 · 1 评论 -
webpack基础
一、关于模块化在学webpack之前,我们需要先谈一谈模块化。前端的工程化少不了的一个部分就是模块化。在ES6之前,我们想要进行门模块化开发,就必须借助于其他的工具,让我们可以进行模块化开发。比如CommonJS,CMD,AMD。并且在通过模块化开发完成了项目后,还需要处理模块间的各种依赖,并且将其进行整合打包。而webpack其中一个核心就是然我们可能进行模块化开发,并且会帮助我们 处理模块间的依赖关系。当然在webpack打包的过程中还有一些附带的功能,比如代码的压缩和图片的压缩,编译等。如何理解原创 2021-05-01 16:43:13 · 423 阅读 · 3 评论