Program Tip

Webpack의 규칙 대 로더-차이점은 무엇입니까?

programtip 2020. 11. 15. 11:37
반응형

Webpack의 규칙 대 로더-차이점은 무엇입니까?


일부 Webpack 예제에서 "rules"배열에 대한 참조를 볼 수 있습니다.

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          //resolve-url-loader may be chained before sass-loader if necessary
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css')
    //if you want to pass in options, you can do so:
    //new ExtractTextPlugin({
    //  filename: 'style.css'
    //})
  ]
}

( https://github.com/webpack-contrib/extract-text-webpack-plugin )

그리고 다른 로더 배열 :

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    loader: "css-loader"
                })
            },
            { test: /\.png$/, loader: "file-loader" }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: "style.css",
            allChunks: true
        })
    ]
};

( https://github.com/webpack/webpack/tree/master/examples/css-bundle )

차이점은 무엇입니까? 어느 것을 사용해야합니까?


로더는 Webpack 1에서 사용되고 규칙은 Webpack 2에서 사용됩니다. 그들은 앞으로 "Loaders"가 module.rules 대신 사용되지 않을 것이라고 말합니다.

공식 Webpack 사이트에서 버전 마이그레이션을 참조하십시오 .

module.loaders는 이제 module.rules입니다.

The old loader configuration was superseded by a more powerful rules system, which allows configuration of loaders and more. For compatibility reasons, the old module.loaders syntax is still valid and the old names are parsed. The new naming conventions are easier to understand and are a good reason to upgrade the configuration to using module.rules.

참고URL : https://stackoverflow.com/questions/43002099/rules-vs-loaders-in-webpack-whats-the-difference

반응형