Q: What is Module?

A: In Webpack, everything is A Module, so it is easy to understand. Module is A file.

Q: Module Can only passwebpack.config.jsFile configuration?

A: Of course not. It just means that the above method is the most commonly used and most recommended by the authorities. There are three ways to configure loader

  • Configuration (recommended) : Specify loader in the webpack.config.js file.
  • inlineIn each:importStatement explicitly specifies the loader.
  • CLI: Specify them in a shell command.

Let’s look at three ways to use it:

//webpack.config.js
module: {
  rules: [{test: /\.css$/.// files ending in.js.
      use: [
          	"style-loader",
            {loader:"css-loader".options: {modules:true}}]}/ / inline
import Styles from 'style-loader! css-loader? modules! ./styles.css';

//CLI
webpack --module-bind jade-loader --module-bind 'css=style-loader! css-loader'
Copy the code

The above three codes have the same meaning for./styles. CSS. They are resolved by CSS-loader first and then by style-loader. As you can see above, although webpack.config.js has the most code, it is the least code and the most traceable at the project level, so we use this method for all the examples below.

Q: What does the Module configuration do?

A: Module can configure Loader resolution rules for specified file types.

  • Let’s start with a basic usage example:
module: {
  rules: [{test: /\.js$/.// files ending in.js.
      use: ["babel-loader"].// Use babel-loader to parse.js files.
      include: path.resolve(__dirname, 'src') // Include only js files in the SRC directory.
    },
    {
      test: /\.css$/.// Matches files ending in.css
      use: ['style-loader'.'css-loader'].// We can use an array of loaders to parse a file, but we need to note that the parse order is from right to left: CSS file -> CSs-loader ->style-loader.
      exclude: path.resolve(__dirname, 'node_modules'), // Exclude all files in the node_modules directory.
    },
    {
      test: /\.(gif|png|jpe? g|eot|woff|ttf|svg|pdf)$/.// Matches non-text files
      use: ['file-loader'].// Use file-loader to parse.]}},Copy the code

Include and exclude make a big difference in packaging efficiency. Be careful, because I’ve noticed that a lot of places ignore these two configurations. This is the easiest and best way to increase your productivity.

  • In use, we can use a string to set the loader. In use, we can also use an object to represent the loader configuration.

    1 / / way
module: {
  rules: [{test: /\.css$/.// Matches files ending in.css
      use: ['style-loader'.'css-loader? modules'],},]}2 / / way
module: {
  rules: [{test: /\.css$/.// Matches files ending in.css
      use: [
          	{loader:'style-loader'}, 
            {loader:'css-loader? modules'.opions: {modules:true}}],},]}Copy the code

    In the above two configuration methods, the configuration is exactly the same. Usually, we use the string mode for basic configuration, but when more customized configuration is needed, we use the object mode for configuration items.

To summarize: We can simply think of Module configuration as configuration for how files are handled.

Well, today for the Module configuration in Webpack has been a simple summary, I hope to help you, continue to pay attention to, together into the world of Webpack, we really master the tools we use every day.