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

Question

我正在学习React，想了解如何为项目配置Web Pack。

如果有人可以告诉我以下代码行在做什么，那将是很好的。

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))
})

module.exports = {
  devtool: 'source-map',

  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' ]
  }),

  output: {
    path: '__build__',
    filename: '[name].js',
    chunkFilename: '[id].chunk.js',
    publicPath: '__build__'
  },

  resolve: {
    extensions: [ '', '.js', '.css' ]
  },

  module: {
    loaders: [
      { test: /\.css$/, loader: 'style!css' },
      { test: /\.js$/, exclude: /node_modules|mocha-browser\.js/, loader: 'babel' },
      { test: /\.woff(2)?$/,   loader: 'url?limit=10000&mimetype=application/font-woff' },
      { test: /\.ttf$/, loader: 'file' },
      { test: /\.eot$/, loader: 'file' },
      { test: /\.svg$/, loader: 'file' },
      { test: require.resolve('jquery'), loader: 'expose?jQuery' }
    ]
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({ name: 'shared' })
  ],

  devServer: {
    quiet: false,
    noInfo: false,
    historyApiFallback: {
      rewrites: [
        { from: /ReduxDataFlow\/exercise.html/,
          to: 'ReduxDataFlow\/exercise.html'
        }
      ]
    },
    stats: {
      // Config for minimal console.log mess.
      assets: true,
      colors: true,
      version: true,
      hash: true,
      timings: true,
      chunks: false,
      chunkModules: false
    }
  }
}

该信息来自一门培训课程，但他们没有解释这些路线在做什么。

Answer 1

Webpack是我们称为JavaScript应用程序的模块捆绑器。您可以使用它来做很多事情，以帮助客户端浏览器下载并运行您的代码。对于React，它有助于将JSX代码转换为纯JS，以便浏览器可以理解它。 JSX本身不会在浏览器中运行。我们甚至可以使用插件来帮助减少代码，注入HTML，将各种代码组捆绑在一起，等等。既然Webpack的介绍已成问题，那么让我们来看一下代码。我将从头开始。如果只对Webpack配置对象感兴趣，请随意跳至#3。


以下代码将需要此文件中所需的模块。 fs是“文件系统”的缩写，是一个模块，可让您运行一些可以访问项目文件系统的功能。 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将分别被解析，并以名称shared捆绑其输出。

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' ]
}),

在reduce函数中，我们只需通读SubjectsDir，确定是否存在文件exercise.js，lecture.js和solution.js，然后将这些文件的路径提供为与dir + '-' + filename标识的键名相关联的值（即： myDir-exercise）。如果仅存在exercise.js，则最终结果可能如下所示：

entry : {
  'myDir-exercise': 'subjectDir/myDir/exercise.js',
  share: ['react', 'react-dom']
}

在提供Webpack配置对象的入口点之后，我们必须指定我们希望Webpack在何处输出捆绑这些文件的结果。可以在output属性中指定。

 output: {
  path: '__build__',
  filename: '[name].js',
  chunkFilename: '[id].chunk.js',
  publicPath: '__build__'
 },

path属性定义输出目录的绝对路径。在这种情况下，我们将其称为__build__。

filename属性定义每个入口点文件的输出名称。 Webpack理解，通过指定'[name]'可以引用在entry属性（即shared或myDir-exercise）中分配给每个入口点的键。

chunkFilename属性类似于filename属性，但对于可以由CommonChunksPlugin指定的非条目块文件（请参见下文）。 [id]的用法类似于[name]的用法。

publicPath属性定义文件所在的公共URL，如通过浏览器访问文件的URL。
resolve属性告诉Webpack如果由于某种原因找不到文件该如何解决文件。我们可以在此处传递几个属性，其中extensions是其中之一。 extensions属性告诉Webpack如果您的代码中未指定文件扩展名，则尝试使用哪些文件扩展名。

 resolve: {
   extensions: [ '', '.js', '.css' ]
 },

例如，假设我们有以下代码

const exercise = require('./exercise');

我们可以省略.js，因为我们在webpack配置的resolve属性中提供了该字符串，并且Webpack将在捆绑时尝试将.js附加到该字符串中以找到您的文件。从Webpack 2开始，我们也不再需要指定空字符串作为resolve属性的第一个元素。
module属性告诉Webpack如何处理项目中的模块。我们可以在此处添加一些属性，我建议您查看文档以获取更多详细信息。 loaders是一个常用属性，通过它我们可以告诉Webpack如何在项目中解析特定文件类型。每个加载器中的test属性只是一个正则表达式，它告诉Webpack运行该加载器的文件。例如，此/\.js$/将在以.js结尾的文件上运行指定的加载程序。 babel-loader是广泛使用的JavaScript + ES6加载程序。 exclude属性告诉Webpack哪些文件不与指定的加载器一起运行。 loader属性是加载程序的名称。从Webpack 2开始，我们不再能够从字符串中删除-loader，如此处所示。
插件具有广泛的功能。如前所述，我们可以使用插件来减少代码或构建整个应用程序中使用的块，例如react和react-dom。在这里，我们看到正在使用CommonChunksPlugin，它将把条目名shared下的文件捆绑在一起，作为一个块，以便可以将它们与应用程序的其余部分分开。
最后，我们具有devServer属性，该属性指定webpack-dev-server行为的某些配置，该配置是与webpack分开的模块。该模块对开发很有用，因为您可以选择不构建自己的Web服务器，并允许webpack-dev-server提供静态文件。它还不会将输出写入文件系统，而是从内存中某个位置（由Webpack配置对象的publicPath属性中的output属性指定的路径）指定分发包（请参见#5）。这有助于加快开发速度。要使用它，您只需运行webpack-dev-server代替webpack。有关更多详细信息，请在线查看文档。


我们看过的配置对象遵循Webpack 1标准。 Webpack 1和2之间在配置语法方面有许多变化，这很重要。但是，概念仍然相同。请参阅文档，以获取有关迁移到Webpack 2的信息以及有关Webpack 2的更多详细信息。