wltsysterm的博客

背景前面我们已经讲解了webpack实现对html里头img标签图片的打包以及实现对css里头的图片的打包。但是动态设置img标签的src值的时候，比如通过绑定的形式，打包成功但是图片访问就失败了。下面分享下怎么来解决这个问题。esModule刚开始以为是file-loader能力不行，所以换成了url-loader，配置两个是一样，但是发现还是不行。找了一下资料，发现是因为缺少了一个配置导致的：esModule: false所以，通过修改file-loader(或者url-loade

背景前面讲解过js，html， css，但是都没有讲解到一个场景，就是图片的场景，这个时候随便往html，插入一个img标签，或者在css里头加个背景图的样式表，打包之后看下会如何。html里头添加img标签打包打包后的html:很显然，img的src的路径是不对的。那么访问肯定会出现404问题css里头添加背景图样式表打包打包直接报错：ERROR in ./1.jpg 1:0Module parse failed: Unexpected character '�'.

背景上一篇文章教大家如何配置多个html，相信大家发现了，html-webpack-plugin是真的很强大，这篇文章专门分享，html-webpack-plugin常用一些属性。title顾名思义，设置生成的 html 文件的标题。filename也没什么说的，生成 html 文件的文件名。默认为 index.html.template根据自己的指定的模板文件来生成特定的 html 文件。这里的模板类型可以是任意你喜欢的模板，可以是 html, jade, ejs, hbs,

目录背景实践问题配置打包多个js文件多html打包excludeChunks和 chunks背景上一篇我们已经讲解了babel对高阶语法以及对vue框架的支持的配置。更早的文章里头，我们引进了html-webpack-plugin来实现动态生成html以及注入打包好的js文件。但是那会的操作仍然是停留在单个html的生成，而我们实际的生产活动中，页面肯定不止一个。因此本篇文章讲解，在多页面的项目里头如何使用html-webpack-plugin。实践其实支持多页.

背景前面已经讲解了怎么打包html/js/css/scss的打包技巧了，这篇文章针对之前的工作出现的问题做善后工作。先讲下之前这样处理会出现什么问题吧。手下，通常我们会给打包生成的js文件做如下的命名操作：修改webpack.config.js文件的配置：const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { devServer:{ contentBase: __dirn

背景上一篇文章介绍了如何基于webpack简化我们的开发流程。这一篇文章讲解如何基于babel来帮助我们降级代码中的语法。可能你不懂 babel 是什么，你可以把它理解为编译器，它能把 react 代码转成一般浏览器可读可执行的代码，通常可以用它来转化 react 或 vue 这样的前端代码，或者把 es6 代码转成普通的 javascript 代码等等。官方介绍：Babel is a JavaScript compiler.Use next generation JavaScript,

背景不管是前端还是服务端，现在都流程热部署。那么webpack是否有呢，因此我们引入webpack-dev-server.webpack-dev-server是一个最常用的插件，一般来说，这个插件，大家都会用，特别是开发环境下。安装webapack-dev-server全局安装：npm install webpack-dev-server -g成功安装日志：+ webpack-dev-server@3.11.0added 390 packages from 269 cont

目录背景loader概念用 css-loader 和 style-loader 处理 CSScss-loader 和 style-loader安装配置文件新增css-loader style-loader用 sass-loader和node-sass把 SASS 编译成 CSS安装sass-loader和node-sass配置文件新增scss-loader背景前面我们引入了html-webpack-plugin，细心的同学发现怎么一直都没有讲css呢。因为css的

背景上一篇，我们已经学会了如何简化webpack打包的流程了。但是无论打包过程怎么变，打包之后的js都需要手动的引入到html文件里头，那么当我们改下打包生成的文件名之后，就需要再次手动的修改html里头的引用了，显然这个有诸多的不便利。eg:有一种情况，有时候为了更好的 cache 处理，文件名还带着 hash，例如下面这样：main.9046fe2bf8166cbe16d7.js这个 hash 是文件的 md5 值，随着文件的内容而变化，你总不能每变化一次，就改一下 index.htm

背景上一篇文章，笔者已经分享了，webpack的基础安装和使用，这一篇文章主要介绍如果通过配置文件，缩减使用webpack的成本，同时也会后面复杂的webapck使用做基础铺垫。npm项目初始化在项目根目录下，运行：npm init -y之后，会自动在项目下生成package.json文件。在scripts节点下添加如下两条命令："dev":"webpack --mode development","build":"webpack --mode production"

注意：该系列教程要求读者已经了解并会使用node相关技术背景学习webpack已有两三年之久了，一直未曾系统性的总结过。仍然记得第一次用webpack还是2.x版本，这个版本的使用问题尤其的多，还记得了很多的排错笔记，但是现在技术更新太快，就从最新的4.44.1版本作为系列教程的演示版本。（你看到该篇文章的时候，可能webpack的版本又发生改变了）安装webpackwebpack是一个全局性的命令依赖，所以，需要将它安装在全局里头。（安装4.44.1版本: npm install -g w

背景学习前端或者有做前端的同学，肯定有发现，写了一些高阶的语法，在浏览器是没办法直接运行的，这个时候，通过会利用webpack来进行打包降级处理。但是会遇到如题的问题。eg:html文件<input id="move-to-left" type="button" onClick="moveToLeft();" value="左移" />被打包的js文件// 向左移动地图function moveToLeft() { var view = map.getVie