Webpack加载程序,包括

JavaScript Webpack

斯丁泡芙

2020-04-03

我是webpack的新手,我试图了解加载器及其属性,例如测试,加载器,包含等。

这是我在Google中找到的webpack.config.js的示例片段。

module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          path.resolve(__dirname, 'index.js'),
          path.resolve(__dirname, 'config.js'),
          path.resolve(__dirname, 'lib'),
          path.resolve(__dirname, 'app'),
          path.resolve(__dirname, 'src')
        ],
        exclude: [
          path.resolve(__dirname, 'test', 'test.build.js')
        ],
        cacheDirectory: true,
        query: {
          presets: ['es2015']
        }
      },
    ]
}
  1. 我是否正确测试:/.js$/仅用于扩展名为.js的文件?

  2. 加载程序:“ babel-loader”,是我们使用npm安装的加载程序

  3. 包括:我对此有很多疑问。我对我们放入数组中的任何内容都将进行转译吗?这意味着将转储lib.app和src中的index.js,config.js以及所有* .js文件。

  4. More questions on the include: When files get transpiled, do the *.js files get concatenated into one big file?

  5. I think exclude is self explanatory. It will not get transpiled.

  6. What does query: { presets: ['es2015'] } do?

第3924篇《Webpack加载程序,包括》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
米亚 2020.04.03

在webpack config中,有很多东西需要配置,重要的是

  1. entry-可以是定义要捆绑资产的入口点的数组或对象,可以是js,如此处测试所示,仅对/.js$这样做。如果您的应用程序具有多个入口点,则使用数组。
  2. 包含-定义路径或文件集,加载程序将在其中转换导入的文件。
  3. exclude是不言自明的(请勿从这些位置转换文件)。
  4. 输出-您要创建的最终捆绑包。如果您指定例如

    输出:{文件名:“ [名称] .bundle.js”,供应商:“反应”}

    然后,您的应用程序js文件将被打包为main.bundle.js并在vendor.js文件中做出反应。如果您不在html页面中同时使用两者,则会出错。

希望能有所帮助

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android