webpack429x成神之路八-使用loader之打包样式下

jiezi

6 年前

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

目录结构如下：

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 上（待更新）

postcss

使用预处理器