Question

我正在学习React并希望了解如何为项目配置Web包。

如果有人能告诉我以下代码行正在做什么，那将会很棒。

$(document).ready(function(){
$('.js-property-switchVisibility').click(function(){
    button = $(this);
    id = button.data('id');
    $.ajax({
        type: 'post',
        url : baseUrl + '/admin/property/toggleVisiblity/',
        data : {id: id, _token: _token},
        success:function(result){
            if(result=="1"){
                button.text("Hide");
                button.removeClass('btn-success').addClass('btn-danger');
            }else{
                button.text("Show")
                button.removeClass('btn-danger').addClass('btn-success');
            }
        }
    });
});

这些信息来自培训课程，但他们没有解释这些课程的内容。

Answer 1

Webpack就是我们所说的JavaScript应用程序的模块捆绑器。您可以使用它来完成大量工作，以帮助客户端浏览器下载并运行您的代码。在React的情况下，它有助于将JSX代码转换为普通JS，以便浏览器可以理解它。 JSX本身不会在浏览器中运行。我们甚至可以使用插件来帮助缩小代码，注入HTML，将各种代码组捆绑在一起等等。既然Webpack的介绍已经不在了，那么让我们来看看代码。我将从最顶层开始。如果您只对Webpack配置对象感兴趣，请随意跳至#3。

以下代码将需要此文件中所需的模块。 fs是＆＃34;文件系统＆＃34;的缩写。并且是一个模块，它为您提供了可以访问项目文件系统的功能。 path是用于解析或创建文件路径名的常用模块，非常易于使用！然后我们有webpack模块，通过它我们可以访问webpack特定的功能（即：webpack.optimize.UglifyJsPlugin等webpack插件。
```
const fs = require('fs')
const path = require('path')
const webpack = require('webpack')
```

接下来的几行首先设置一个辅助函数来确定正在读取的文件系统中的某些东西是否是一个目录。

function isDirectory(dir) {
  return fs.lstatSync(dir).isDirectory()
}

const SubjectsDir = path.join(__dirname, 'subjects')
const SubjectDirs = fs.readdirSync(SubjectsDir).filter(function (dir) {
  return isDirectory(path.join(SubjectsDir, dir))
})

devtool指定要用于帮助调试的开发人员工具。选项列在此处：https://webpack.github.io/docs/configuration.html#devtool。这对于帮助您确切地确定哪些文件和行和列错误来说非常有用。
```
devtool: 'source-map'
```
接下来的几行告诉Webpack从哪里开始捆绑文件。这些初始文件称为entry points。 Webpack配置对象中的entry属性应该是一个对象，其键确定包的名称，值指向条目文件的相对路径或node_module的名称。您还可以将文件数组传递到每个入口点。这将导致每个文件以密钥指定的名称捆绑在一个文件中 - 即：react和react-dom将分别解析并将其输出捆绑在名称{{1 }}。
```
shared
```
在reduce函数中，我们只需读取SubjectsDir，确定文件entry: SubjectDirs.reduce(function (entries, dir) { if (fs.existsSync(path.join(SubjectsDir, dir, 'exercise.js'))) entries[dir + '-exercise'] = path.join(SubjectsDir, dir, 'exercise.js') if (fs.existsSync(path.join(SubjectsDir, dir, 'solution.js'))) entries[dir + '-solution'] = path.join(SubjectsDir, dir, 'solution.js') if (fs.existsSync(path.join(SubjectsDir, dir, 'lecture.js'))) entries[dir + '-lecture'] = path.join(SubjectsDir, dir, 'lecture.js') return entries }, { shared: [ 'react', 'react-dom' ] }),，exercise.js＆amp;存在lecture.js，然后将这些文件的路径提供为与solution.js标识的键名相关联的值（即：dir + '-' + filename）。如果仅存在myDir-exercise，则最终可能会出现以下情况：
```
exercise.js
```
在我们提供Webpack配置对象的入口点之后，我们必须指定Webpack在哪里输出捆绑这些文件的结果。这可以在entry : { 'myDir-exercise': 'subjectDir/myDir/exercise.js', share: ['react', 'react-dom'] }属性中指定。
```
output
```
output: { path: '__build__', filename: '[name].js', chunkFilename: '[id].chunk.js', publicPath: '__build__' },属性定义输出目录的绝对路径。在这种情况下，我们称之为path。

__build__属性定义每个入口点文件的输出名称。 Webpack了解到，通过指定filename，您指的是分配给'[name]'属性中每个入口点的密钥（即：entry或shared）。

myDir-exercise属性类似于chunkFilename属性，但适用于可由filename指定的非条目块文件（见下文）。 CommonChunksPlugin的使用类似于[id]的使用。

[name]属性定义了文件所在位置的公共URL，如通过浏览器访问文件的URL。
publicPath属性告诉Webpack如果由于某种原因找不到文件，如何解析文件。我们可以在这里传递几个属性，resolve就是其中之一。 extensions属性告诉Webpack如果在代码中未指定文件扩展名，则尝试使用哪些文件扩展名。
```
extensions
```
例如，我们说我们有以下代码
```
 resolve: {
   extensions: [ '', '.js', '.css' ]
 },
```
我们可以省略const exercise = require('./exercise');因为我们在webpack配置的.js属性中提供了该字符串，而Webpack会在捆绑时尝试将resolve附加到此处以查找您的文件。从Webpack 2开始，我们也不再需要将空字符串指定为.js属性的第一个元素。
resolve属性告诉Webpack如何处理项目中的模块。我们可以在这里添加几个属性，我建议您查看文档以获取更多详细信息。 module是一个常用属性，我们可以告诉Webpack如何解析项目中的特定文件类型。每个加载器中的loaders属性只是一个Regex，它告诉Webpack在哪个文件上运行此加载器。例如，此test将对以/\.js$/结尾的文件运行指定的加载程序。 .js是一个广泛使用的JavaScript + ES6加载器。 babel-loader属性告诉Webpack哪些文件不能与指定的加载器一起运行。 exclude属性是加载程序的名称。从Webpack 2开始，我们再也无法从字符串中删除loader了。
插件具有广泛的功能。如前所述，我们可以使用插件来帮助缩小代码或构建在整个应用程序中使用的块，例如-loader和react。在这里，我们看到正在使用的CommonChunksPlugin将条目名react-dom下的文件捆绑在一起作为一个块，以便它们可以与应用程序的其余部分分开。
最后，我们有shared属性，该属性指定devServer行为的某些配置，webpack-dev-server是与webpack分开的模块。此模块可用于开发，因为您可以选择不构建自己的Web服务器并允许webpack-dev-server提供静态文件。它也不会将输出写入您的文件系统，并从内存中的位置为Webpack配置对象的publicPath属性中的output属性指定的路径提供捆绑（请参阅{{1} }）。这有助于加快开发速度。要使用它，您只需运行#5代替webpack-dev-server。请在线查看文档以获取更多详细信息。

我们已经看过的配置对象遵循Webpack 1标准。 Webpack 1和2之间在配置语法方面有很多变化，这对于查看非常重要。然而，这些概念仍然相同。有关迁移到Webpack 2的信息以及有关Webpack 2的更多详细信息，请查看文档。

WebPack配置 - 什么是正确的代码，它是什么意思

1 个答案: