webpack4.29.x成神之路（八） 使用loader之打包样式下

目录

上节： 使用loader之打包样式上

目录结构如下：

postcss

PostCSS 是一个允许使用 JS 插件转换样式的工具。 这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins， 编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能。截止到目前，PostCSS 有 200 多个插件。[官方传送门][3]

这里就示范其中一个添加浏览器前缀的插件： autoprefixer

首先浏览器运行上节打包后的代码，即bundles/index.html查看图片样式：

现在css3没有加浏览器前缀，利用autoprefixer可轻松解决这一问题，不需要自己手动添加。

首先修改配置;

webpack.config.js:

// 省略
{
  test: /\.css$/,
  use: ['style-loader', {
        loader: 'css-loader',
        options: {
        // 开启模块化
        modules: true
    }
  }, 'postcss-loader']
}
// 省略

这样css会先经过postcss-loader处理。

然后安装插件：npm i postcss-loader autoprefixer -D

再到根目录下新建postcss.config.js，并添加如下代码：

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

然后npm run build，运行打包后的代码，这时应该自动加上前缀了

这些postcss的插件各自都有自己的配置，详细使用可参考官网： https://github.com/postcss/au...

for example:

module.exports = {
    plugins: [
        require('autoprefixer')({
            "browsers": [
                "defaults",
                "not ie < 11",
                "last 2 versions",
                "> 1%",
                "iOS 7",
                "last 3 iOS versions"
            ]
        })
    ]
};

使用预处理器

这里以less为例：

修改配置webpack.config.js:

// 省略
{
  test: /\.less$/,
  use: ['style-loader', {
        loader: 'css-loader',
        options: {
        // 开启模块化
        modules: true
    }
  }, 'postcss-loader', 'less-loader']
}
// 省略

安装依赖：npm i less-loader less -D

修改后缀，src/styles/index.less，

修改内容index.less：

@w: 350px;
@h: 300px;

.pic{
  width: @w;
  height: @h;
  transform: translateX(300px);
}

src/index.js中的引入也要改：

import pic from './images/cover.png';

// 模块化引入
import indexStyle from './styles/index.less';

window.addEventListener('DOMContentLoaded', function() {
  const root = document.getElementById('root');
  const img = new Image();
  img.src = pic;
  img.classList.add(indexStyle.pic);
  root.appendChild(img);
});

npm run build,运行打包后的代码，效果应该和之前一样。

less同样也有很多配置， 官网传送

下节：webpack-dev-server上（待更新）