webpack4系列教程(五):处理项目中的资源文件(二)

栏目: 编程语言 · 发布时间: 5年前

内容简介:在 src/assets/ 下新建 common.less :在 main.js 中引入 common.less :

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 标签载入了:

webpack4系列教程(五):处理项目中的资源文件(二)

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 文件:

webpack4系列教程(五):处理项目中的资源文件(二)

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

webpack4系列教程(五):处理项目中的资源文件(二)

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,可见浏览器前缀已经加上了:

webpack4系列教程(五):处理项目中的资源文件(二)

本人才疏学浅,不当之处欢迎批评指正


以上所述就是小编给大家介绍的《webpack4系列教程(五):处理项目中的资源文件(二)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

四步创业法

四步创业法

[美] Steven Gary Blank / 七印部落 / 华中科技大学出版社 / 2012-8-1 / 48.00

《四步创业法》获李开复推荐,是精益创业理论的奠基之作。作者Steven Gary Blank博士是硅谷资深企业家,他一共创办了八家企业,并担任多家硅谷公司的董事和创业顾问。本书总结作者25年创业经验,提出全新的客户发展方法 (诣在弥补传统产品开发方法的缺陷) ,掀起了硅谷近年精益创业 的浪潮。七印部落正在翻译作者的博客和授课视频,欢迎访问微博:http://weibo.com/7seals ......一起来看看 《四步创业法》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具