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

目录

上节：使用loader之打包图片

目录结构如下：

本节使用webpack处理样式，先在src下添加样式文件并引入到index.js中：
新建src/styles/index.css并添加如下内容:

.pic{
  width: 350px;
  height: 300px;
  transform: translateX(300px);
}

修改src/index.js:

import pic from './images/cover.png';
import './styles/index.css';

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

修改webpack.config.js，配置css相关loader
webpack.config.js:

// 省略依赖
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash:8].js',
    path: resolve(__dirname, 'bundles')
  },
  module: {
    rules: [{
      test: /\.(gif|jpg|jpeg|png|svg)$/,
      use: [{
        loader: 'url-loader',
        options: {
          // 当图片大于801k时，交给file-loader处理
          limit: 801920,

          // 打包后的文件名
          name: '[name].[hash:8].[ext]',

          // 打包路径
          outputPath: 'images/'
        }
      }]
    }, {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new CleanWebpackPlugin()
  ]
};

修改完后目录如下：

然后安装相关loader:
npm i style-loader css-loader -D
然后 npm run build

此时css就会经过依次经过css-loader > style-loader处理，loader的处理顺序都是从后向前

打包成功后运行 bundles/index.html，可以看到样式生效：

CSS模块化

刚才在index.js中引入css的方式是：
import './styles/index.css';
这种写法其实是全局生效的，也就是说index.js中如果依赖了其它js，那这些js都可以直接使用index.css中的样式。
下面改成模块化的引入方式：
src/index.js:

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


// import './styles/index.css';  全局生效

// 改为模块化引入
import indexStyle from './styles/index.css';

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

然后还要再css-loader的选项中开启模块化：
webpack.config.js:

module: {
    rules: [{
      test: /\.(gif|jpg|jpeg|png|svg)$/,
      use: [{
        loader: 'url-loader',
        options: {
          // 当图片大于801k时，交给file-loader处理
          limit: 801920,

          // 打包后的文件名
          name: '[name].[hash:8].[ext]',

          // 打包路径
          outputPath: 'images/'
        }
      }]
    }, {
      test: /\.css$/,
      use: ['style-loader', {
        loader: 'css-loader',
        options: {
          // 开启模块化
          modules: true
        }
      }]
    }]
  },

然后再次打包：npm run build, 运行bundles/index.html效果应该和之前一样。

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