Webpack加载markdown文件内容
前言 本文适合使用create-react-app（下文称之为cra）创建的项目，是react官方脚手架，内部由react-scripts支持； markdown是一种轻量级的富文本文件类型，按照惯例，加载不同类型的文件，我们需要在webpack中配置对应的loader实现； 因为cra默认是将所有的配置都封装在react-scripts中，默认没有给我们提供对应的修改入口，要是我们修改的话有两个…
webpack抽取项目中的less文件
前言 在项目中我一般喜欢一些预处理css处理器来开发代码，首先是因为灵活，其次就是能很好的处理样式的命名空间，防止样式冲突。 场景 在React相关的项目开发中，我们的开发方式是每一个组件中会有一个单独的less文件，如果需要让分散在项目中的less文件全部抽取到一个统一的css文件中，就需要用到extract-text-webpack-plugin插件实现样式的抽取。 该插件是webpack 4…
使用DefinePlugin改变打包流程
前言 基于webpack开发的时候，我们有些代码只需要在开发时期来运行，例如打印详细的错误或警告信息。 有些代码我们需要在线上运行的时候在执行。例如数据埋点，如果在开发的时候就运行，会导致线上埋点的结果不是很准确，失去了分析的意义。 实现 今日我通过查看部分库的源代码，里面用到了webpack的 DefinePlugin，这个插件可以定义一个webpack打包时的全局变量，在我们的代码中可以通过判…
webpack4升级指南
因为webpack4有很多吸引人的特性，在开发的时候能能提高效率，所以将团队项目的webpack3升级到了webpack4； 新特性 对Node.js版本必须>=8.9.4； 支持WebAssembly； 支持多种模块类型； 通过mode来处理开发环境和线上环境优化； 更简单配置的拆包功能； 更快的热加载功能； 零配置模块打包（output:./dist/main.js；entry:./sr…
Webpack输出资源内容到html文件
需求来源 对于小的项目或者单文件的网页，我们将css文件和js文件可以直接内联插入到html中，可以实现单文件部署（使用场景：例如在一些可视化编辑器上直接粘贴生成的html代码就可以运行了）；当然比较大的项目我们可以注入一些公共的样式和js文件的到html中； 我们使用html-webpack-plugin的插件 https://github.com/DustinJackson/html-webp…