webpack同类型文件执行不同loader操作

最新推荐文章于 2022-11-16 15:48:44 发布

weixin_33957648

最新推荐文章于 2022-11-16 15:48:44 发布

阅读量370

点赞数

文章标签： webpack 前端 git ViewUI

原文链接：https://juejin.im/post/5b0233ab518825306465634d

版权

以前在需要兼容ie8的情况下，前端会有基于webpack会进行两套工作流，pc一套（webpack1.x.x），h5一套(最新版本的webpack)。公司本身太多东西不能舍弃ie用户，不过现在跑到了新公司，不需要考虑pc兼容ie8的问题了，那么也就觉得没必要搞两套工作流兼容不同浏览器了。基于以上所述，决定修改一下webpack的配置，在同一个工作流里完成移动端跟pc的的开发。

做移动端h5开发的时候大家都知道应该使用px2rem这个插件来编译css，如果有的刚做前端的小伙伴不清楚为什么，就解释一下为什么要用这个插件吧。

接手公司的外包项目发现都是直接写rem的，这个怎么跟设计稿换算尺寸的呢，不清楚换算单位，也没有哪里备注说明（这就是一些外包质量差的啦，外包质量好的当然也有啦）
每次量完ps尺寸之后还要手动计算一下转换成rem，小伙伴表示这效率也太慢了

基于以上两原因，有经验的小伙伴是不会直接在css里面去写rem的。那么就开始用起来webpack做一个不编译px到rem的pc版本的css,同时也可以编译px到rem的配置咯。

添加模块 yarn add webpack webpack-cli style-loader css-loader
配置webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  watch: true,
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'js/[name].bundle.js'
  },
  module: {
    rules: [{
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      
    ]
  }
}
复制代码

在package.json里面添加scripts

"watch": "webpack"
复制代码

这一步验证一下是否样式OK了，我是在本地直接用anywhere 打开一个server来调试的，所以不做server的介绍咯。
那么现在要分开做移动端跟pc端的处理了，主要用到moduel.rules的include,这个跟test的功能差不多，都是属于过滤条件，主要用于文件夹过滤的。那么就考虑css文件分两个目录一个css文件夹与一个test文件夹，test文件夹放置H5的样式文件。
添加模块yarn add postcss-loader autoprefixer postcss-flexbugs-fixes postcss-px2rem
修改rules

{
        test: /\.css$/,
        include: [
          path.resolve(__dirname, "src/css"),
        ],
        use: ['style-loader', {
          loader: 'css-loader',
          options: {
            // root: '.'
          }
        }]
      },
      {
        test: /\.css$/,
        include: [
          path.resolve(__dirname, "src/test"),
        ],
        use: ['style-loader', {
          loader: 'css-loader',
          options: {
            root: '.'
          }
        }, {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: () => [
              flexbugs,
              autoprefixer({
                browsers: [
                  '>1%',
                  'last 4 versions',
                  'Firefox ESR',
                  'not ie < 9', // React doesn't support IE8 anyway
                ],
                flexbox: 'no-2009',
              }),
              px2rem({
                remUnit: 75
              })
            ],
          }
        }]
      },
复制代码