webpack4系列教程（五）：处理项目中的资源文件（二）

Channe 发布于2019-08-23 14:42 / 2334人阅读

摘要：首先安装在中引入并添加修改和的之后，可见中引入了一个文件也正是我们在和中的代码可以帮助我们处理，如自动添加浏览器前缀。在根目录下创建修改和的在中加入打包之后打开，可见浏览器前缀已经加上了

1. 在项目中使用 less

在 src/assets/ 下新建 common.less ：

body{
  background: #fafafa;
  padding: 20px;
}

在 main.js 中引入 common.less ：

import "./assets/style/common.less"

安装 less-loader：

npm i less-loader -D

添加 rules：

     {
        test: /.less$/,
        use: [
          "style-loader",
          "css-loader",
          "less-loader"
        ]
      }

打包之后，在浏览器打开 dist/index.html，less文件中的样式已经通过 style 标签载入了：

2. 使用MiniCssExtractPlugin

我们之前的样式代码都是通过 style 标签载入的，那么如何通过 link 引入CSS文件的方式实现呢？

这就需要使用一个插件，在webpack3中通常使用ExtractTextWebpackPlugin，但是在webpack4中已经不再支持ExtractTextWebpackPlugin的正式版，而测试版本又不够稳定，因此我们使用MiniCssExtractPlugin替代。首先安装：

npm install --save-dev mini-css-extract-plugin

在webpack.config.js 中引入并添加 plugins ：

const MiniCssExtractPlugin = require("mini-css-extract-plugin")

new MiniCssExtractPlugin({
      filename: "[name].css"
    }),

修改 CSS 和 less 的 rules：

{
        test: /.css$/,
        use: [
          // "style-loader",
          {
            loader: MiniCssExtractPlugin.loader
          },
          "css-loader"
        ]
      },
      {
        test: /.less$/,
        use: [
          // "style-loader",
          {
            loader: MiniCssExtractPlugin.loader
          },
          "css-loader",
          "less-loader"
        ]
      }

npm run build 之后，可见head中引入了一个 main.css 文件：

也正是我们在 common.less 和 modal.css 中的代码

3. postcss-loader

postcss-loader 可以帮助我们处理CSS，如自动添加浏览器前缀。

npm i -D postcss-loader autoprefixer

在根目录下创建 postcss.config.js：

const autoprefixer = require("autoprefixer")

module.exports = {
  plugins: [
    autoprefixer({
      browsers: ["last 5 version"]
    })
  ]
}

修改 css 和 less 的 rules：

{
        test: /.css$/,
        use: [
          // "style-loader",
          {
            loader: MiniCssExtractPlugin.loader
          },
          { loader: "css-loader", options: { importLoaders: 1 } },
          "postcss-loader"
        ]
      },
      {
        test: /.less$/,
        use: [
          // "style-loader",
          {
            loader: MiniCssExtractPlugin.loader
          },
          "css-loader",
          "postcss-loader",
          "less-loader"
        ]
      }

在 modal.css中加入：

.flex{
    display: flex;
}

打包之后打开 main.css，可见浏览器前缀已经加上了：

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101022.html

webpack4系列教程（十）：总结

摘要：传送门系列教程一初识系列教程二创建项目，打包第一个文件系列教程三自动生成项目中的文件系列教程四处理项目中的资源文件一系列教程五处理项目中的资源文件二系列教程六使用分割代码系列教程七使用系列教程八使用审查代码系列教程九开发环境和生产环境在前端开发日益复杂的今天，我们需要一个工具来帮助我们管理项目资源，打包、编译、预处理、后处理等等。webpack的出现无疑是前端开发者的福音，我的博文只...

hqman 2019-08-26 13:29 评论0 收藏0
webpack-demos：全网最贴心webpack系列教程和配套代码

摘要：全网最贴心系列教程和配套代码欢迎关注个人技术博客。所以我花费了个多月整理了这份教程，一共分成节，每节都有讲解，并且准备了配套代码。奈何深感水平不够，只有一腔热情，所以直接开放了教程和源码。 webpack-demos：全网最贴心 webpack 系列教程和配套代码欢迎关注个人技术博客：godbmw.com。每周 1 篇原创技术分享！开源教程(webpack、设计模式）、面试刷题（偏前...

LMou 2019-08-23 12:25 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0