二、webpack的loader配置

webpack打包的时候只认识 js 文件，但我们开发中肯定不仅仅只是js文件，如 html 、 css 、 jpg 等，webpack提供了很多 loader 来打包不同类型的文件。

对于加载css文件来说，我们需要一个可以读取css文件的loader，这个loader最常用的是 css-loader 。

webpackconfigjs

css-loader 只是负责将css文件进行解析，并不会将解析之后的css插入到页面中，如果我们希望再完成插入style的 *** 作，那么我们还需要另外一个loader，就是 style-loader 。

注意： 因为loader的执行顺序是从右向左（或者说从下到上，或者说从后到前的），所以我们需要将styleloader写到css-loader的前面。

其实 style-loader 做的事情很简单，就是在动态创建了一个 style 标签，把 css-loader 处理的css内容放到style标签内，然后在插入到页面的 head 标签内。

安装less工具将less文件转为css文件。

使用 less-loader ，来自动使用less工具转换less到css

安装

使用

在 这里 可以查询浏览器的占有率。

Browserslist 是一个在不同的前端工具之间，共享目标浏览器和Nodejs版本的配置

方案一：在 packagejson 中配置：

方案二：在根目录新建 browserslistrc 文件

方案一和方案二配置的条件都是 or 关系， 如果要同时满足条件用 and

PostCSS 是一个通过JavaScript来转换样式的工具，这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置，但是实现这些工具，我们需要借助于PostCSS对应的插件。

可以在 这里 查询到css样式添加规则。

因为我们需要添加前缀，所以要安装autoprefixer：

命令行直接使用使用postcss工具，并且制定使用autoprefixer：

在webpack中使用postcss就是使用 postcss-loader 来处理的。

安装

配置

第一种方案：

webpackconfigjs

第二种：

也可以将plugin封装出来，在根目录新建 postcssconfigjs 文件：

webpackconfigjs

事实上，在配置postcss-loader时，我们配置插件并不需要使用autoprefixe，我们可以使用另外一个插件： postcss-preset-env 。

postcss-preset-env也是一个postcss的插件，它可以帮助我们将一些现代的CSS特性，转成大多数浏览器认识的CSS，并且会根据目标浏览器或者运行时环境添加所需的polyfill，也包括会自动帮助我们添加autoprefixer（所以相当于已经内置了autoprefixer）。

安装 ：

使用

将 autoprefixer 替换成 postcss-preset-env 就行了：

有些插件直接写字符串就行，会自动requre：

问题复现：

假如 mainjs 里面引入了 src/indexcss ，而 src/indexcss 里使用 @import 引入了 src/testcss ，就会出现 src/testcss 文件里的样式不会被 postcss 所处理，这时候就需要配置：

webpackconfigjs

要处理jpg、png等格式的，我们也需要有对应的loader： file-loader

安装

配置

webpackconfigjs

资源加载方式：

有时候我们处理后的文件名称按照一定的规则进行显示，比如保留原来的文件名、扩展名，同时为了防止重复，包含一个hash值等。这个时候我们可以使用 PlaceHolders 来完成，webpack给我们提供了大量的PlaceHolders来显示不同的内容。

介绍几个最常用的placeholder：

自定义打包名字和输出路径：

webpackconfigjs

url-loade r和file-loader的工作方式是相似的，但是可以将较小的文件，转成base64的URI。

安装

配置

和file-loader用法很相似

在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader 、url-loader、file-loader，在webpack5之后，我们可以直接使用 资源模块类型（asset module type） ，来替代上面的这些loader。

注意： asset module type 打包的资源如果用require不需要 detault

asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。

自定义输出文件和文件名

webpack5 的[ext]已经包含了

第一种写法：

这种写法包含所有的assetModule的定义，不推荐。

webpackconfigjs

第二种写法：

webpackconfigjs

asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。

webpackconfigjs

asset 可以实现url-loader的limit效果。

我们可以选择使用file-loader来处理，也可以选择直接使用webpack5的资源模块类型来处理。

使用 react + webpack 启动一个简单的 react 例子时, 报错 :

一 项目结构:

二 一些文件内容:

appjsx:

packagejson:

webpackconfigjs:

出现错误的原因: resolvemodules 这个方法使用错了, resolvemodules 告诉 webpack 寻找模块时应该从哪些路径查找, resolvemodules 的默认值就是 ["node_modules"], 我写成这样 modules: [APP_PATH] 就不去 "node_modules" 查找了

resolvemodules 里的路径可以是相对路径, 也可以是绝对路径 如果是相对路径, 查找模块时会像 node 查找模块一样, 先从离的最近的 node_modules 目录里查找, 如果没找到, 层层向上继续找, 直到到最外层的根目录的 node_modules 如果是绝对路径, 就简单多了, 只在指定的路径里查找

贴上 官网

vue-cli3 创建的时候并不会自动创建vueconfigjs，因为这个是个可选项，所以一般都是需要修改webpack的时候才会自己创建一个vueconfigjs

再然后因为vue-cli3内部高度集成了webpack，一般来说使用者不需要再去知道weboack做了什么，所以没有暴露webpack的配置文件，我们可以手动去创建vueconfigjs 去修改默认的webpack。注意，只能叫vueconfigjs。

publicPath （从 Vue CLI 33 起已弃用baseUrl，请使用publicPath）

参考： >

webpack 的默认配置文件是 webpackconfigjs ,所以在我们的项目根目录下(02webpack-demo)新建一个webpackconfigjs的文件，里面啥都不写，这个时候我们在终端中运行 npx webpack ,就会在根目录下生成一个 dist 文件夹，里面有一个 mainjs ，这是 webpack 利用默认的配置项为我们打包生成的文件,接下来我们来简单配置一下这个文件里面的内容:

配置好文件后，再次运行 npx webpack ,这个时候在我们的项目目录下就生成了一个 bundle 文件夹，里面有一个 bundlejs 就是 webpack 帮我们翻译好的文件了，在我们的 demohtml 中引入 bundlejs ，在浏览器中打开 demohtml 文件，可以看到我们打印的内容已经正确的出现在了浏览器控制台中了。

我们已经知道了 webpack 的默认配置文件的名字是 webpackconfigjs ，那么有没有办法修改这个名字呢？比如我想把这个名字改为 testconfigjs 或者其他什么名字，答案是有的，比如我改成了 testjs ，那么在利用 webpack 进行打包的时候就应该运行 npx webpack --config testjs ，打包结果和上面的还是一样的

在上面的打包过程中，每次打包的时候都要执行 npx webpack 或者 npx webpack --config testjs ,你可能会觉得有点繁琐，我们可以在 packagejson 中的 scripts 中配置一个脚本，如下所示:

配置好脚本之后，在终端中执行 npm run bundle 这个命令， webpack 就会重新帮我们打包文件，这里涉及到的知识点是 npm scripts ,它的原理是当我们在终端中执行 npm run bundle 的时候，实际上在运行的就是 packagejson 配置中的 bundle 这个命令，而 bundle 这个命令的底层就是在帮我们执行 webpack 这个命令，这里有一个点需要注意，如果我们在 scripts 中以命令的形式去执行 webpack 的时候，首先会在工程目录下的 node-modules 下去找是否安装了 webpack ，如果安装了的话就会直接使用 node-modules 中的 webpack ,但是如果 node-modules 下面没有 webpack ,就会去全局寻找 webpack

1全局安装的 webpack ,打包的之后在终端中运行 webpack indexjs

2局部安装的 webpack ，打包的之后在终端中运行 npx webpack indexjs

3通过配置 npm scripts 脚本，打包的之后在终端中运行 npm run 你配置的脚本的内容 ，比如我配置的脚本为:

那么在打包的时候运行 npm run test 即可

[js高手之路]深入浅出webpack教程系列索引目录：

[js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数

[js高手之路]深入浅出webpack教程系列2-配置文件webpackconfigjs详解(上)

[js高手之路]深入浅出webpack教程系列3-配置文件webpackconfigjs详解(下)

[js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)

[js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)

[js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)

[js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法

[js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法

[js高手之路]深入浅出webpack教程系列9-打包(file-loader)用法

上文我们讲到了options的配置和获取数据的方式，本文，我们继续深入options的配置

一、html-webpack-plugin插件中的options除了自己定义了一些基本配置外，我们是可以任意的添加自定义的数据

webpackdevconfigjs文件:

1 var HtmlWebpackPlugin = require('html-webpack-plugin');

2 moduleexports = {

3 entry : {

4 main : '/src/js/mainjs',

5 calc : '/src/js/calcjs'

6 },

7 output : {

8 //__dirname，就是当前webpackconfigjs文件所在的绝对路径

9 path : __dirname + '/dist', //输出路径，要用绝对路径

10

vue20之后配置都写在 vueconfigjs 文件中，这篇文章说一下项目常用的配置

由于所有的配置都被封装起来了，所以我们查看webpack配置，可以用以下几个命令

使用vue-cli创建一个项目，我们运行 vue inspect --rules 命令看一下输出

我们有这样一个需求：项目中想使用svg，但是不希望用默认的loader解析svg，所以我们要自己配置svg的规则

配置前我们需要明白怎样链式配置webpack，就是在 vueconfigjs 里面使用 chainWebpack 这个方法，不明白没关系，继续走。

1禁用webpack默认对svg解析的行为

2配置我们自己的规则解析svg

3封装一个组件，自动引入所有的svg

首先我们查看一下 svg 的默认配置，运行 vue inspect --rule svg 命令

看一下结果，可以成功显示

接下来 vueconfigjs 文件中，使用 chainWebpack 这个方法，这个方法会传入一个 config 参数，利用 configmodulerule() 这个方法，得到 svg 这个规则里面的详细配置信息，之后调用 exclude 这个Set对象的 add() 方法，将我们不希望处理的文件夹路径添加进去，从而完成禁用。

最后我们看一下配置完的 svg 之后的规则，有什么不同

禁用之后重新启动项目，ok，报错

安装依赖

使用 configmodulerule("icons") 创建一个icons规则

使用 vue inspect --rule icons 查看我们新配置的icons规则

到这一步我们的svg就算是配置成功，但是项目中不可能只有一个svg，我们不可能每次使用svg的时候都要引入，我们希望更加丝滑一些，所以我们要封装一个组件并且自动引入所有的svg

我们希望用的时候，传入一个名字就可以

新建Svgvue

在icons文件夹中新建indexjs

mainjs中引入

Appvue中使用这个组件

成功显示，配置成功

webpack-dev-middleware与webpack-hot-middleware用于本地开发

[webpack-dev-middleware]( >

以上就是关于二、webpack的loader配置全部的内容，包括:二、webpack的loader配置、Module not found: Error: Can't resolve 'react' in、通俗易懂讲解vue.config.js的配置参数等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！