【未完结】阮一峰webpack-demos 手动翻译(中文版) 及 学习笔记

阮一峰老师的webpack-demos原文链接：https://github.com/ruanyf/webpack-demos。

webpack官方文档：https://www.webpackjs.com/concepts/targets/。

最近在学习webpack，我师父给我发了一个阮一峰老师的教程链接，原文是英文的。最近还在学习，我把文章翻译成中文的，顺便自己的笔记和中间遇到的问题&解决方法都记录下来，希望能帮助到大家。

——————————————————–以下是正文——————————————————-

这个repo是Webpack一些简单演示程序的集合。

这些演示是有目的地以简单明了的方式编写的。你会发现跟随他们学习强大的工具没有困难。

 

如何使用

---

首先，全局安装 Webpack 和 webpack-dev-server 。

$ npm i -g webpack webpack-dev-server

然后，将这些 demos 克隆下来。

$ git clone https://github.com/ruanyf/webpack-demos.git

接着，安装依赖。

$ cd webpack-demos
$ npm install

现在，就可以使用repo的demo**目录下的源文件（注：例如demo01)

$ cd demo01
$ npm run dev

如果上述命令没有自动打开浏览器，则必须自己访问 http://127.0.0.1:8080。

// 更详细的webpack安装流程可以参考：webpack安装详解 ；使用流程可以参考：webpack使用详解：浏览器显示Hello World!。

// 结合使用，效果更佳。

 

前言：什么是webpack

---

Webpack是一个用来为浏览器构建JavaScript模块脚本的前端工具。

它可以像Browserify一样使用，而且做得更多。

$ browserify main.js > bundle.js
# be equivalent to
$ webpack main.js bundle.js

Webpack需要一个CommonJS模块的配置文件，叫 webpack.config.js。

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};

在有了 webpack.config.js 文件后，你可以在没有任何参数的情况下调用webpack。

你应该知道的一些 webpack 命令选项：

webpack ：为开发版构建

webpack -p ：为生产版构建

// 压缩混淆脚本

webpack –watch ：为持续增加地构建

// 监听变动并自动打包

webpack -d ：including source maps

// 生成打包的模块，即生成 bundle.js 文件

webpack –colors ：是构建的产品更漂亮

// 添加颜色