yin_991的博客

css实现模块化的目的主要是为了使得所引入的样式文件只对当前文件内容有效，不会影响其他文件的样式。webpack.config.js文件里面的css-loader加一个配置modules: true。const path = require('path');module.exports = { mode: 'development', entry: { m...

使用webpack打包样式资源需要用到比较多的loader，而且这些loader的顺序不能乱，遵循从右到左、从下到上的解析规则。经过上一篇的文章，已经学习了使用webpack来打包图片文件，这一节就到了写如何使用webpack打包样式文件的时候了。虽然使用的loader比较多，但是只要按照顺序把loader写好，然后正确配置loader，其实样式文件的解析并不难。本文首先从最简单的cs...

前面写了webpack打包js文件的方法，但打包图片资源又会用到什么的方法呢？本文就这个问题进行探讨学习。本文的目的是使用webpack打包图片资源，并能够使打包后的图片显示在浏览器上。初始化目录首先，备好一张图片素材，我使用的是一张之前在网上下载过的手机图片，格式为jpg，当然，使用其他的格式如png、gif也是可以的，到时在配置文件里面更改响应的配置即可。开始的时候目...

本文开始讲解如何通过webpack配置文件打包，首先，来看一下项目的目录结构。上一篇文章讲到最基础的打包方式，没有使用webpack的配置文件来打包。使用webpack配置文件就得先在目录中新建一个webpack.config.js文件，这个就是webpack的配置文件。1、新建webpack.config.js文件touch webpack.config.js2、目录...

上一篇文章讲了如何安装webpack，那么安装好了webpack就到了实践的时候了。首先，最基础的就是懂得如何打包js文件，webpack如果不使用loader的话，其实它本身就不会解析任何其他文件，只会解析js文件。所以本文先讲解如何打包js文件，从最简单的开始。1、新建一个文件夹存放项目mkdir study_22、初始化项目npm init3、安装webpackn...

本文主要讲解如何安装webpack4。所使用系统是mac，直接使用系统自带的终端输入指令安装，window系统的读者安装方法大同小异，可以先安装git再在git bash里面输入指令安装。1、先安装node npm 查看版本node --versionnpm --version查看版本，如果显示版本，那么就说明你电脑安装好了node，安装了node那么npm也会有，因为no...