链接地址：https://webpack.docschina.org/guides/hot-module-replacement/#%E9%97%AE%E9%A2%98

错误：

+     element = component(); // Re-render the "component" to update the click handler
+     element = component(); // 重新渲染 "component"，以便更新 click 事件处理函数

正确：

+     element = component(); // 重新渲染 "component"，以便更新 click 事件处理函数

原文：

import Test1 from 'xyz'; // Exact match, so path/to/file.js is resolved and imported
import Test2 from 'xyz/file.js'; // Not an exact match, normal resolution takes place

翻译：

import Test1 from 'xyz'; // 精确匹配，所以 path/to/file.js 被解析和导入
import Test2 from 'xyz/file.js'; // 精确匹配，触发普通解析

import Test2 from 'xyz/file.js'; // 应该是非精确匹配。
链接1
链接2

很多微小的问题都可以自动化检查，包括&不限于（空格，换行，中英文标点），能不能用脚本处理这些问题，提交之前给贡献者提醒？或者有现成可用的工具？

启动项目

拉取项目， cd 进入目录后运行：

主要步骤

• github fork 仓库代码到自己的账号下
• git clone fork 的仓库代码到本地，进入项目目录
• npm install 安装所有项目依赖
• npm start 本地环境启用 webpack-dev-server。
• 浏览器打开 localhost:3000 查看当前文档情况，已支持模块热替换(Hot Module Replacement) ，可边改边看。（修改端口请在 antwar.config.js 中添加 module.exports = {port: 4000, ...}）
• 然后用自己喜欢的编辑器，比如 Sublime Text 3 打开项目目录，找到 content 目录 , 也就是当前文档翻译的目录，去 https://github.com/webpack-china/webpack.js.org/projects/1 中，（请先仔细查看翻译建议、任务认领后再进行认领）认领 issue 中对照文件名.md ，认领自己打算翻译的内容，然后打开该文件就可以进行翻译了！

• npm run build 创建线上站点静态资源（点我访问线上）
• 翻译完后，使用git 提交更新到自己的仓库，后，在https://github.com/webpack-china/webpack.js.org/pulls 提交合并请求

• 备注：感谢 @neal1991 图片已更新。左边的是上游仓库webpack-china/webpack.js.org的cn分支，右边是fork仓库yourname/webpack.js.org的cn分支。
• 希望大家看清楚需要合并的分支，为 webpack-china/webpack.js.org/cn 分支，不要向 webpack 官方分支发起合并请求，也不要向 webpack-china/webpack.js.org/master 分支发起合并请求，谢谢。
• 耐心等待 webpack-china 的官方人员 merge pull-request。
• 官方人员 merge pull-request，更新在线静态站内容。

「中文仓库」和「我的仓库」如何同步？

gitlab 或 github 下 fork 后如何同步源的新更新内容？

遵循webpack中文网 tree-shaking 的文档而来，关于这篇文档我有些疑问，我照着它提供的代码编译时，在 mode 为 development 的情况下，示例里是

dist/bundle.js (around lines 90 - 100)

/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
  'use strict';
  /* unused harmony export square */
  /* harmony export (immutable) */ __webpack_exports__['a'] = cube;
  function square(x) {
    return x * x;
  }

  function cube(x) {
    return x * x * x;
  }
});

而我运行的结果是带着 eval 函数的。并且也没有 /* unused harmony export square */ 的标识

/***/ "./src/math.js":
/*!*********************!*\
  !*** ./src/math.js ***!
  \*********************/
/*! exports provided: square, cube */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"square\", function() { return square; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"cube\", function() { return cube; });\n// import { toPrimitive } from './util';\r\n\r\nfunction square(x) {\r\n  return x * x;\r\n}\r\n\r\nfunction cube(x) {\r\n//   let val = toPrimitive(x);\r\n  return val * val * val;\r\n}\r\n\n\n//# sourceURL=webpack:///./src/math.js?");

/***/ }),

当 mode 为 prodution 时，官网给的例子只是说道会去掉没有引入的 square 函数。但能看到 cube

但是如果仔细观察，则不会看到引入 square 函数，但能看到 cube 函数的混淆破坏版本（function r(e){return e*e*e}n.a=r）

而我编译的结果他不仅去掉了 square，甚至连整个依赖都被直接合并进了主函数里（注意下文的代码里调用依赖函数的地方直接变成了 val * val * val，牛逼啊）。而这又是怎么回事呢？

.......省略 webpack 基础代码50+行
([
  function (e, t, n) {
    "use strict";
    var r;
    n.r(t),
      document.body.appendChild(
        (((r = document.createElement("pre")).innerHTML = [
          "Hello webpack!",
          "5 cubed is equal to " + val * val * val,
        ].join("\n\n")),
        r)
      );
  },
]);

https://github.com/docschina/webpack.js.org/blob/cn/src/content/api/cli.md

There is a spelling mistake in file webpack.js.org/src/content/guides/development.md

The original is:

  export default function printMe() {
-   console.log('I get called from print.js!');
+   cosnole.error('I get called from print.js!');
  }

The correct text is:

  export default function printMe() {
-   console.log('I get called from print.js!');
+   console.error('I get called from print.js!');
  }

问题描述

中文文档站左侧目录展开至一定高度后，在页面滚动时定位错误， 遮挡横向导航，详见截图

操作系统/浏览器 版本号

macOS 10.12.3/Chrome 56
windows 10/Chrome 56

问题在线复原地址

https://docs.webpack-china.org/configuration/

复现步骤

页面往下滚动约40px

截图

macOS

windows

注意：校对时，是以 git 仓库 master 分支的的英文文档为基准做对比，而非 https://webpack.js.org/。

由于现有的文档已经大部分完成翻译，所以下一步准备开始进行文档校对+审校工作。

翻译校对及审校之差别

• 校对，其实是对译文的简单检查过程，可通过人工或机器辅助来完成，一般就是看看是否有错译、漏译、标点符号错误、错别字、大小写、拼写错误、单复数、动词时态、数字错误、人名地名错误，等等。这些，具有一般英语基础的人都可以做，有些校对软件可以起到辅助作用。
• 审校呢，就要比校对高深多了，一般来说，审校人员要比翻译人员水平高，能够发现翻译人员所犯的错误，包括如上所述校对人员应该发现的错误，还有包括文章专业性，译文准确性等等问题，这是一般校对人员以及翻译人员自己都无法或没有能力发现的问题了。

校对+审校暂定计划如下。

人员要求

校对：全员可参与（可以3-5人校对一个文档），主要 1)查找文档中有错译、漏译、标点符号错误、错别字、大小写、拼写错误、单复数等等。2)在准确还原原文意思、不漏翻译词语的前提下，对文档不通顺的地方尽量做到通顺、易于阅读人员去理解。
审校：资深人员参与（官方指定，可以1-2人校对一个文档），从专业的角度，找出不符合官方作者所表明的意思，即校对人员无法发现，只有实际用到的人员才能发现的那些错误。

校对内容

目前情况：
20170212
1)个别章节还是 //todo 待编写完成
2)/content/loaders 和 /content/plugins 由于多数非官方编写，可能会进行一些增删。
3)/content/development 官方可能会新增一些文档。
/content/api（未开始校对）
/content/concepts（未开始校对）
/content/configuration（未开始校对）
/content/development（未开始校对）
/content/guides（计划开始校对）
/content/loaders（未开始校对）
/content/plugins（未开始校对）
/content/pluginsapi（未开始校对）

本次校对迭代20170212

主要对 /content/guides 进行校对+审校，校对完成后线上发布一版。

认领方式

和翻译文档相同，在 projects 的对应 issue 中进行认领。认领格式如下：

1. （全体人员）认领校对：此章节由我校对。
2. （全体人员）校对完成：此章节我已完成校对。
3. （指定人员）认领审校：此章节由我审校。
4. （指定人员）审校完成：此章节我已完成审校。

校对人员规范（暂定）：

关于翻译 - 翻译建议 #20

I want translate copy-webpack-plugin.md to Chinese. 此文章由我翻译。

使用现有的中文文档中的实例代码编译运行会报错

https://github.com/docschina/webpack.js.org/blob/cn/src/content/configuration/dev-server.md

linking https://travis-ci.org/webpack-china/webpack.js.org/jobs/222592871

https://github.com/docschina/webpack.js.org/blob/cn/src/content/api/compilation-hooks.md

When I run npm start, there throw some error after npm install.

在指南模块下的缓存文章中确定性的(Deterministic)哈希值
这块，文章中提到ChunkManifestWebpackPlugin插件，但是经测试，在Webpack 3版本中出现错误：

ERROR in chunk manifest [entry]
js/[name].bundle.js
Chunk.entry was removed. Use hasRuntime()

貌似是不兼容的情况。

reference：Error in chunk manifest[entry]

https://github.com/docschina/webpack.js.org/blob/cn/src/content/configuration/output.md

地址：https://github.com/docschina/webpack.js.org/blob/cn/src/content/configuration/configuration-languages.md

这里应该是只能容纳两个中文字符，所以“表”就会被单独呈现。

参照 https://www.webpackjs.com/guides/development/ ，通过 webpack --watch 当代码发生改变时自动编译代码，但是编译后的文件不全

备注：我用的是最新版的 webpack

我的 webpack.config.js

var path = require('path')
var HTMLWebpackPlugin = require('html-webpack-plugin')
var { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  entry: {
    index: './src/index.js'
  },
  mode: 'development',
  devtool: 'source-map',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: "[name].js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      title: 'My Title'
    })
  ]
}

/src/index.js

import './index.css'
import comp from './comp.js'
import policy from './报警地址.png'
import location from './icon-定位.svg'

var img = new Image()
img.src = policy
document.body.appendChild(img)

var imgLocation = new Image()
imgLocation.src = location
document.body.appendChild(imgLocation)

document.body.appendChild(comp())

/src/comp.js

export default function comp () {
  var ele = document.createElement('div')
  ele.innerHTML = 'hello webpack'
  return ele
}

都是一些很简单的实验代码

webpack 2 翻译任务认领说明 - 入口目录

@ALL，注意

1. TODO 是 webpack 官方尚未编写完整，暂时不用翻译
2. 极其简短的文档不计在完成进度中（因为有可能是官方还没有详细编写）。避免 merge 官方分支后，出现未翻译却记录已翻译的情况。
3. 翻译时间建议不超过 2 周 14 天时间，过期后可由其他人重新认领。
4. 翻译彻底完成后，webpack-china 官方维护人员关闭对应 issue。

「webpack 中文」官方网址：点击访问https 点击访问http
「webpack 中文」QQ 群： 425986482

加入微信群

为了加速 webpack 的推广，我们决定建立一个 webpack 中文翻译的微信群，大家在里面可以互相交流。
大家先添加我的微信号 wuwangbufu002，加的时候报下你的 github 名称，我将加你好友，然后拉入微信群。

认领说明

翻译

• 翻译前，请在此处认领

• 认领示例：/content/guides/index.md - 我是认领示例哦

• 认领格式 ：此章节由我翻译，翻译时间为 2017.01.01-2017.01.14。

• 如果本人认领，然后发现没有时间翻译，可以取消认领

• 取消认领格式：此章节我暂时没有时间翻译，请其他同学协助代为翻译，谢谢！

• 翻译完成，到领取的 issue 中回复：此章节我已翻译完成 #453（记得把 pr 编号带上，#号+数字编号会自动关联相应的 pr）。官方维护人员收到留言消息提示后，修改对应 issue 的状态。

没找到提交翻译错误的入口。阅读过程中发现了几处翻译错误。如下：

1. https://doc.webpack-china.org/guides/caching
   实例代码中出现了两处contenthash，应是chunkhash。

客户端（通常是浏览器）就能够访问网站此服务器的网站及其资产。
原文：clients (typically browsers) will hit that server to grab the site and its assets
assets 应为资源不是资产。 应该有个术语表统一下。

2. https://doc.webpack-china.org/plugins/ignore-plugin
   requestRegExp 测试资源请求路径的正则表达式。
   contextRegExp (可选) 测试资源上下文(目录)的正则表达式。
   原文test被翻译成了测试，test是JS中的一个检测匹配正则表达式的方法。在这里翻译成匹配比较合理。

说明

参与：

• 如果你看到错别字、漏译、错译，请直接提交 pr （帮助）。
• 如果你看到网站问题，或者创建一个 issue，或者直接提交 pr。
• 如果你对已有翻译有异议，建议创建一个 issue 讨论。
• 如果你想修改英文内容，请去 [webpack.js.org 官方][webpack.js.org]提交 pr。
• 如果你想求教 webpack 使用问题，请去[webpack 中文论坛][forum]。
• 如果你遇到 webpack 的问题，请去 [webpack 项目][webpack]，
• 创建 issue 并提供演示。可以在 JSBin, JSFiddle, Codepen 等网站创建演示。
• 由于本人也不是完全精通 webpack，以下术语如有理解错误的地方，请在此 issue 下方讨论，或联系本人，讨论完成后修改。

翻译要求

• 保持一致，清晰
• 英文与中文的行数请保持一致！！！
• 汉字，字母，数字等之间以一个空格隔开（以英文单词开头/结尾时，和前面/后面的中文符号不需要空格）。
• 中文使用中文符号，英文使用英文符号。
• 专有词注意大小写，如 webpack（小写不要写错），HTML，CSS，JavaScript。
• 术语与已有译文保持一致，如果有异议请先在 issue 中讨论。
• 专有名词为便于查阅者理解，建议后跟「英文括号加词组」解释说明，如：...模块热替换(Hot Module Replacement)...（中文后面的英文注释，用英文括号扩起来，中文括号太占地方，看起来不够协调和美观）
• 代码只翻译注释。
• 校对后对应修改提交 pull-request，静待官方人员 merge。

翻译词汇

翻译词汇

• Check the current issues to ensure you aren't creating a duplicate.
• Consider making small typo fixes and such directly as pull requests.
• For the voting application, go to https://github.com/webpack-contrib/voting-app.
• For loader/plugin docs, consider opening an issue in the corresponding repository.
• No existing issue? Go ahead and open a new one.
• Remove these instructions from your PR as they are for your eyes only.

https://github.com/johnagan/clean-webpack-plugin#options-and-defaults-optional相关变更地址

错误：
+ const CleanWebpackPlugin = require('clean-webpack-plugin');

正确：
+ const {CleanWebpackPlugin} = require('clean-webpack-plugin');

https://webpack.docschina.org/guides/development/

现在，webpack 观察文件的同时，我们先移除我们之前引入的错误：

src/print.js
export default function printMe() {
- cosnole.log('I get called from print.js!');
+ console.log('I get called from print.js!');
}

现在,保存文件并检查终端窗口。应该可以看到 webpack 自动重新编译修改后的模块！

上文代码中, 第一个console.log应改为console.error

https://github.com/docschina/webpack.js.org/blob/cn/src/content/configuration/devtool.md

For example, print.js has been introduced in index.js. Why do I need to package and output print.js in the configuration file? Besides, I can still run normally without this print.js in this demo.

指南-代码分离 中 CommonsChunkPlugin 在新版 webpack 中已被移除，英文官网 已有相关说明，请尽快更新，之前的用法在新版本中会报错

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead....

您好，怎么才能认领任务呢？

文档貌似没有跟官网同步哦。

• // 将图像添加到我们现有的 div。
• var myIcon = new Image();
• myIcon.src = Icon;
• element.appendChild(myIcon);

Icon值为类似5c999da72346a995e7e2718865d019c8.png，而不是类似/dist/5c999da72346a995e7e2718865d019c8.png
导致图片加载失败

示例代码中还是使用的CommonsChunkPlugin 这个插件，但是The CommonsChunkPlugin 已经从 webpack v4 legato 中移除，改用了SplitChunksPlugin。英文原文中的示例代码也改为了

optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }

但是中文文档的内容还没有更新。
如果按照现在的进行编写，会出现报错Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

管理输出 这个页面没有更新。

对应的md文件是正确的

问题是 clean-webpack-plugin 插件参数只支持对象。 页面中显示为 new CleanWebpackPlugin(['dist'])

https://github.com/docschina/webpack.js.org/blob/cn/src/content/configuration/mode.md

I see the html doucment don't have -o, but the md file is right. I guess the webside don't have update

.
├── dist
├── index.html
└── src
├── index.js
├── index2.js
└── others.js
webpack src/index.js dist/bundle.js # error
webpack src/index.js -o dist/bundle.js # right

see this url
https://www.webpackjs.com/api/cli/#%E4%BD%BF%E7%94%A8%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E7%9A%84%E7%94%A8%E6%B3%95

由之前const CleanWebpackPlugin = require('clean-webpack-plugin') 改为 const { CleanWebpackPlugin } = require('clean-webpack-plugin')，不然run build的时候会报TypeError: CleanWebpackPlugin is not a constructor

1.基础指引说明：#18

2. 任务管理：https://github.com/webpack-china/webpack.js.org/projects

3.任务认领

• 任务认领：https://github.com/docschina/translator-guide/blob/master/projects/webpack/claim_a_task.md

• 规范词汇：https://github.com/docschina/translator-guide/blob/master/projects/webpack/spec_words.md

• 校对审校：https://github.com/docschina/translator-guide/blob/master/projects/common/checker_and_proofreader.md

• 译者指南：https://github.com/docschina/translator-guide/blob/master/projects/common/translator.md

• 译者建议：https://github.com/docschina/translator-guide/blob/master/projects/common/translator_suggest.md

• 谷歌翻译：https://github.com/docschina/translator-guide/blob/master/projects/common/google_translate.md

4. 其他

• 管理人员操作指南：https://github.com/docschina/translator-guide/blob/master/projects/common/manager.md

• 任务状态管理：https://github.com/docschina/translator-guide/blob/master/projects/common/task_status.md

• 注意事项：https://github.com/docschina/translator-guide/blob/master/projects/webpack/note.md

https://webpack.docschina.org//guides/dependency-management

https://github.com/docschina/webpack.js.org/blob/cn/src/content/configuration/configuration-types.md

• Check the current issues to ensure you aren't creating a duplicate.
• Consider making small typo fixes and such directly as pull requests.
• For the voting application, go to https://github.com/webpack-contrib/voting-app.
• For loader/plugin docs, consider opening an issue in the corresponding repository.
• No existing issue? Go ahead and open a new one.
• Remove these instructions from your PR as they are for your eyes only.

As title, you need update Documents for this . pls check this file
webpack/webpack#6357

CommonsChunkPlugin
The following guides try to give 1 to 1 translations for the CommonsChunkPlugin. This does not neccessary fit bet pratices.

Best practise
optimization: {
  splitChunks: {
    chunks: "all"
  }
}
You need to generate the HTML from stats json. Use the entrypoints property from Stats to know which files to include for each entrypoint.

文档地址：https://webpack.js.org/concepts/plugins/
这个3的写法已经废弃了，建议改正。搞得新手我，怀疑人生。

优化

when i check the files ，has not a file named starter-kits-data.json

示例：
github: https://github.com/lcxfs1991
nickname: lcxfs1991

在指南-> 代码分离 -> 动态导入 一节中，src/index.js的如下代码并不会得到预期的结果：

- import _ from 'lodash';
-
- function component() {
+ function getComponent() {
-   var element = document.createElement('div');
-
-   // Lodash, now imported by this script
-   element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+   return import(/* webpackChunkName: "lodash" */ 'lodash').then(_ => {
+     var element = document.createElement('div');
+
+     element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+
+     return element;
+
+   }).catch(error => 'An error occurred while loading the component');
  }

- document.body.appendChild(component());
+ getComponent().then(component => {
+   document.body.appendChild(component);
+ })

这里有两处错误。

1. 致命错误！应该在import后的then中 加上 _ = _.default
2. catch后不能直接返回message啊，要console.error('An error occurred while loading the component')

希望得到及时修改。谢谢。

https://github.com/docschina/webpack.js.org/blob/cn/src/content/configuration/entry-context.md

/bin/sh: 1: node: not found
gyp: Call to 'node -e "require('nan')"' returned exit status 127. while trying to load binding.gyp
npm ERR! weird error 127
gyp ERR! configure error
gyp ERR! stack Error: gyp failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/usr/share/node-gyp/lib/configure.js:431:16)
gyp ERR! stack at ChildProcess.EventEmitter.emit (events.js:98:17)
gyp ERR! stack at Process.ChildProcess._handle.onexit (child_process.js:797:12)
gyp ERR! System Linux 3.13.0-32-generic
gyp ERR! command "nodejs" "/usr/bin/node-gyp" "rebuild"
gyp ERR! cwd /root/webpack.js.org/node_modules/antwar/node_modules/hard-source-webpack-plugin/node_modules/level/node_modules/leveldown
gyp ERR! node -v v0.10.25
gyp ERR! node-gyp -v v0.10.10
gyp ERR! not ok
npm WARN This failure might be due to the use of legacy binary "node"
npm WARN For further explanations, please read
/usr/share/doc/nodejs/README.Debian

有没有可能是扫描历史commit记录 自动添加的。
同理，对比官方整个的commit历史和cn分支的commit历史 是不是也可以得出中文版的整个的contributors