The last article covered webPack installation and basic configuration. Today we will talk about loader. If Webpack does not use Loader, it only supports JS files and JSON files by default. You can’t do anything with CSS, HTML, etc. We can make corresponding loaders to load files of different formats and convert them into valid modules. Here’s how to load CSS files.

The installation

To load CSS files, use CSS-loader. Install CSS-loader first

npm/cnpm install css-loader -D

CNPM installation can be seen in my last article webpack simple introduction (a)

configuration

In order to facilitate management, we can uniformly write the configuration of Webpack in webpack.config.js, and module. Rules allows us to configure multiple loaders, which is convenient to maintain in the future.

const path = require('path') // Some modules in node


// Export configuration information using the CommonJS specification
module.exports = {
  entry: './src/main.js'.// Entry file, default index
  output: {
    filename: "bundle.js".// The packaged file name
    path: path.resolve(__dirname, './dist')  // The directory where the package is located, __dirName The directory name of the current module
  },
  module: {
      rules: [{test: /\.css$/.// Matches files, usually with regular expressions
          use: [   // Corresponds to an array
            // Configure different loaders
            /* Object attributes: loader: specifies the loader name. The value is a string. Options: specifies configuration information
            { loader: 'css-loader'}  
            // 'css-loader', can also be written like this}]}}Copy the code

Up to this point, the CSS file can be loaded normally, but we found that the style of the CSS file introduced by main.js does not work in an HTML import packaged JS file.

This is because csS-loader is only responsible for loading and parsing CSS files, and does not insert the parsed CSS into the page. If you want to complete the style insert, you need to use the style loader.

style-loader

NPM/CNPM install style-loader -d

Configuration:

    use: [   
        { loader: 'style-loader' },
        { loader: 'css-loader'}]Copy the code

Styles display normally

Note: Loaders are executed from right to left (or bottom to top, or back to front), so we need to put style-loader in front of CSS-loader (load CSS file first, then insert styles into the page).

less/scss/Stylus-loader

In development, we generally use SCSS, less, and stylus preprocessors to write CSS styles. Here, take less files as an example. To compile less files into CSS, install less and less-Loader (different CSS preprocessors correspond to different Loaders).

NPM/CNPM install less less-loader -d

Configuration:

      {
         test: /\.(less|css)$/,
         use: [
           "style-loader"."css-loader"."less-loader"]}]Copy the code

SCSS file –> Compile to CSS file –> Load and parse CSS file –> Add page

postcss

Postcss is a tool to convert styles through javascript, this tool can help us with some CSS conversion and adaptation; For example, add a specific vendor prefix to the CSS rules, and be compatible with new CSS features. These functions are implemented with the help of different PostCSS plug-ins.

NPM/CNPM install postCSs-loader -d

NPM/CNPM install Autoprefixer -d if we want to add the prefix

Configuration:


{
    test: /\.(less|css)$/,
    use: [
        "style-loader"."css-loader"."less-loader",
        {
            loader: "postcss-loader".options: {
                postcssOptions: {
                    plugins: [
                        require('autoprefixer')
                        // "autoprefixer" //}}}]}Copy the code

We can also put this configuration information into a new file, postcss.config.js

{
    test: /\.(less|css)$/,
    use: [
        "style-loader"."css-loader"."less-loader"."postcss-loader"]}Copy the code

postcss-preset-env

  • Automatic help to add AutopreFixer (equivalent to having AutopreFixer built in)
  • The ability to translate some of the new CSS features into CSS that most browsers recognize; Depending on the target browser or runtime environment

Add the required polyfill(referring to a code block). This code block provides developers with a technology that allows browsers to provide native support, smoothing out differences in API compatibility between browsers.

Install: NPM/CNPM install postCSs-env -preset -d

    plugins: [
        require("postcss-preset-env"),
        / / or "postcss preset - env." "
    ]
Copy the code

References:

  • Path module: node

  • webpack

  • webpack-loader

  • postcss

  • polyfill

  • Inside Vue3 + TypeScript by Hongyuan Wang