blocks|key|120085|text|1)正确。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|120086|2)正确。|120087|3)正确。|120088|4)我不确定。我的webpack.config.js文件包含一个输出键，并将其全部打包到一个文件中：|120089|output:+{
++++path:+path.resolve(__dirname,+'build'),
++++filename:+'bundle.js'
}|code-block|syntax|javascript|120090|5)正确。|120091|6)这将告诉babel-loader您希望它执行哪种类型的转换，以及其他编译选项。因此，例如，如果您希望它也传输jsx+%2B缓存结果以提高性能，您可以将其更改为：|120092|query:+{
++++presets:+['react',+'es2015'],
++++cacheDirectory:+true
}|120093|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|X|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|J|7|11|8|@]|9|@]|A|$K|L]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

1) Correct.

2) Correct.

3) Correct.

4) I am unsure. My webpack.config.js file includes an output key, and does bundle it all into one file:

<pre><code>output: {
 path: path.resolve(__dirname, 'build'),
 filename: 'bundle.js'
}
</code></pre>

5) Correct.

6) This tells babel-loader what sort of transpile you want it to perform, as well as other compile options. So, for example, if you want it to transpile jsx as well + cache results for improve performance, you would change it to:

<pre><code>query: {
 presets: ['react', 'es2015'],
 cacheDirectory: true
}
</code></pre>

blocks|key|2675573|text|在webpack的配置中有多项配置，重要的有|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2675574|2675575|entry+-可以是数组，也可以是定义要捆绑的资产的入口点的对象，也可以是js，因为这里的测试说明只对/.js$执行此操作。如果您的应用程序有多个入口点，请使用数组。loader.|ordered-list-item|2675576|exclude包含-定义导入文件将由places).|2675577|output转换的路径或文件集不言而喻(请勿转换来自这些|2675578|的文件-您想要创建的最终|2675579|。如果您指定例如|2675580|2675581|输出：{文件名："name.bundle.js"，供应商："react“}|2675582|然后，您的应用程序js文件将被捆绑为main.bundle.js，并在vendor.js文件中进行反应。如果在html页中不同时使用这两种方法，则是错误的。|2675583|希望能有所帮助|2675584|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|X|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|Y|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|E|7|10|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|M|5|E|7|12|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|V|$]]

In webpack config there are multiple things for configuration, important ones are

<ol>
<li>entry - can be an array or an object defining the entry point for the asset you want to bundle, can be a js as test here says do it only for /.js$. Your application if has multiple entry points use an array.</li>
<li>include - defines the set of path or files where the imported files will be transformed by the loader.</li>
<li>exclude is self explanatory (do not transform file from these places).</li>
<li>output - the final bundle you want to create. if you specify for example

output: {
 filename: "[name].bundle.js",
 vendor: "react"
}

Then your application js files will be bundled as main.bundle.js and react in a vendor.js files. It is an error if you do not use both in html page.</li>
</ol>

Hope it helped

blocks|key|122791|text|这些文档帮助我更好地理解。看起来这是针对webpack+1的，但仍然适用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|122792|https://webpack.github.io/docs/configuration.html#module-loaders|offset|length|122793|122794|+加载器|blockquote|style|BOLD|122795|122796|自动应用的加载器数组。|122797|每个项目都可以具有以下属性：|122798|122799|122800|test:必须为met|unordered-list-item|122801|exclude:的条件|122802|include:不能满足的条件对于路径或文件数组，其中导入的文件将由加载器进行转换|122803|loader:字符串“！”separated+loaders+|122804|loaders:+a+array+of+loaders+as+string|122805|+(字符串分离的加载器将加载器的数组命名为string)|122806|这个例子帮助我理解了到底是怎么回事。看起来您可以使用include或exclude，但不能同时使用两者。测试是应用于所有文件的条件。因此，如果包含文件夹，则每个文件都必须通过测试条件。我没有验证这一点，但根据文档提供的示例，它看起来是如何工作的。|122807|++++module:+{

++++++rules:+[
++++++++{
++++++++++//+"test"+is+commonly+used+to+match+the+file+extension
++++++++++test:+/\.jsx$/,

++++++++++//+"include"+is+commonly+used+to+match+the+directories
++++++++++include:+[
++++++++++++path.resolve(__dirname,+"app/src"),
++++++++++++path.resolve(__dirname,+"app/test")
++++++++++],
++++++++++//+"exclude"+should+be+used+to+exclude+exceptions
++++++++++//+try+to+prefer+"include"+when+possible

++++++++++//+the+"loader"
++++++++++loader:+"babel-loader"+//+or+"babel"+because+webpack+adds+the+'-loader'+automatically
++++++++}
++++++]

++++}|code-block|syntax|javascript|122808|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1S|0|0|0|1|3|0|0|0|0|0|0|0|5|0|0|8|0|0|8|0|0|7|0|0|8|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1K|8|@]|9|@$D|1L|E|1M|1|1N]]|A|$]]|$1|F|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]|$1|G|3|H|5|I|7|1P|8|@$D|1Q|E|1R|J|K]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1T|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1U|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]|$1|S|3|T|5|U|7|1X|8|@$D|1Y|E|1Z|J|K]]|9|@]|A|$]]|$1|V|3|W|5|U|7|20|8|@$D|21|E|22|J|K]]|9|@]|A|$]]|$1|X|3|Y|5|U|7|23|8|@$D|24|E|25|J|K]]|9|@]|A|$]]|$1|Z|3|10|5|U|7|26|8|@$D|27|E|28|J|K]]|9|@]|A|$]]|$1|11|3|12|5|U|7|29|8|@$D|2A|E|2B|J|K]]|9|@]|A|$]]|$1|13|3|14|5|6|7|2C|8|@]|9|@]|A|$]]|$1|15|3|16|5|6|7|2D|8|@]|9|@]|A|$]]|$1|17|3|18|5|19|7|2E|8|@]|9|@]|A|$1A|1B]]|$1|1C|3|-4|5|6|7|2F|8|@]|9|@]|A|$]]]|1D|$1E|$5|1F|1G|1H|A|$1I|C]]]]

This documentation helped me understand better. Looks like it is for webpack 1 but still applies. 

<a href="https://webpack.github.io/docs/configuration.html#module-loaders" rel="noreferrer">https://webpack.github.io/docs/configuration.html#module-loaders</a>

<blockquote>
 Loaders
 
 An array of automatically applied loaders.
 
 Each item can have these properties:
 
 <ul>
 <li>test: A condition that must be met</li>
 <li>exclude: A condition that must not be met </li>
 <li>include: An array of paths or files where the imported files will be transformed by the loader </li>
 <li>loader: A string of “!” separated loaders </li>
 <li>loaders: An array of loaders as string</li>
 </ul>
</blockquote>

This example helped me understand what is going on. Looks like you use either include or exclude but not both. The test is a condition applied to all files. So if you include a folder, each file must pass the test condition. I have not verified this, but based on the example provided by the documentation, it look like that is how it works. 

<pre><code> module: {

 rules: [
 {
 // "test" is commonly used to match the file extension
 test: /\.jsx$/,

 // "include" is commonly used to match the directories
 include: [
 path.resolve(__dirname, "app/src"),
 path.resolve(__dirname, "app/test")
 ],
 // "exclude" should be used to exclude exceptions
 // try to prefer "include" when possible

 // the "loader"
 loader: "babel-loader" // or "babel" because webpack adds the '-loader' automatically
 }
 ]

 }
</code></pre>

I'm new to webpack and I'm trying to understand loaders as well as its properties such as test, loader, include etc.

Here is a sample snippet of webpack.config.js that I found in google.

<pre><code>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']
 }
 },
 ]
}
</code></pre>

<ol>
<li>Am I right that test: /.js$/ will be used only for files with extension .js?</li>
<li>The loader: 'babel-loader', is the loader we install using npm</li>
<li>The include: I have many questions on this. Am I right that anything we put inside the array will be transpiled? That means, index.js, config.js, and all *.js files in lib, app and src will be transpiled.</li>
<li>More questions on the include: When files get transpiled, do the *.js files get concatenated into one big file?</li>
<li>I think exclude is self explanatory. It will not get transpiled.</li>
<li>What does query: { presets: ['es2015'] } do?</li>
</ol>

webpack loaders and include

我是新手，我正在尝试理解加载器以及它的属性，如测试，加载器，包含等。这是我在谷歌上找到的webpack.config.js的样本片段。module: {    loaders: [      {        test: /\.js$/,        loader: 'babel-loader',        in...

问webpack加载器和包括
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问webpack加载器和包括EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问webpack加载器和包括
EN