Webpack for Beginners

Your Step-by-Step Guide to Learning Webpack 4 by Mohamed Bouzid

---

源代码：
https://gitee.com/liyangzhong/webpack_beginners.git
https://github.com/Li-YangZhong/webpack_beginners.git

---

Once you are in the webpack_beginners folder, use the following command to initiate a basic JSON file:
$ npm init -y
This will create a file called package.json that will save references to our installed modules.
Via npm, the -y option is to answer yes to all prompted questions; it’s not that important for us at this stage, so we will just say yes to everything.

---

install webpack using our command line:

$ npm install webpack webpack-cli --save-dev

The --save-dev option is to tell NPM that we need this just for our development purposes, meaning that these packages will be installed on our local machine only.

---

cnpm不支持package-lock.json
1. 使用cnpm install时候，并不会生成package-lock.json文件，网上搜，cnpm维护者似乎并不打算支持该功能，具体大家可以去搜下。
2. cnpm install的时候，就算你项目中有package-lock.json文件，cnpm也不会识别，仍会根据package.json来安装。所以这就是为什么之前你用npm 安装产生了package-lock.json，后面的人用cnpm来安装，可能会跟你安装的依赖包不一致，这是因为cnpm 不受package-lock.json影响，只会根据package.json进行下载。

链接：https://www.jianshu.com/p/2e459040a29f

---

The package-lock.json is the full representation of the dependency tree of your project, including the indirect dependencies. For example, when you install webpack, other packages that it depends on will get installed as well. Package-lock.json will also contain the specific version of each module, so that if someone took your project later and ran “npm install” on their machine, they will get the exact same versions you installed. That way there will be no breakdown on the application (i.e., due to a package that got updated and has some break changes).

---

Out of the box, webpack won’t require you to use a configuration file.
However, it will assume the entry point of your project is src/index and will
output the result in dist/main.js minified and optimized for production.
Source: https://webpack.js.org/configuration/

What this means is that webpack expects you to create an entry file called index.js inside an src folder, and then it will create and output the result in dist/main.js for you, without the need to create the configuration file yourself or do anything else.

---

If you wonder what a node_modules/.bin/webpack is, it’s just the path to our webpack command, which is basically a JavaScript file itself.

---

As you can see from the output, webpack specifies what was built for us as a result (a file called main.js); also notice a warning at the bottom that says the following:

WARNING in configuration.
The ‘mode’ option has not been set, so webpack will fall back to
‘production’ for this value. Set 'mode' option to 'development' or
‘production’ to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn
more at https://webpack.js.org/configuration/mode/

This simply means that we haven’t told webpack what mode we are working on (development or production) yet, as result, the fallback is set automatically to production so it decides that our JavaScript should be minified. In order to get rid of that warning above, we will add a flag --mode=production when calling the webpack command like this:
node_modules/.bin/webpack --mode=production

---

We used before “node_modules/.bin/webpack” as it might seem
that it’s an ugly way to do it, and for sure there is a better way. What you can do is to open your package.json file and look under scripts, which appears like this:

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}

Remove the line:
"test": "echo \"Error: no test specified\" && exit 1"
And replace it with this one:
"build": "webpack --mode=production"
So it will look like this:

"scripts": {
"build": "webpack --mode=production"
} 

---

In the “script” line that we added above to our package.json, there is no need to specify the exact path to webpack file like we did in our terminal because it will know where to find it. Now instead of calling:
$ node_modules/.bin/webpack
We will use our custom command:
$ npm run build
This will look for a webpack command in the node_modules folder and call it for us. Note that you can name your script what you like. It doesn’t necessarily have to be “build.” You can, for example, name it “dev” and then call it from your terminal as the following:
$ npm run dev

---

Webpack understands CommonJS and ES6 modules.

---

require () is not part of the standard JavaScript API. But in Node.js, it’s a built-in function with a special purpose: to load modules. Modules are a way to split an application into separate files instead of having all of your application in one file.

---

import { sayHello } from './greeting.js'

What if we change ‘./greeting.js’ to ‘greeting.js’ ? What will happen? Well, if you do so, webpack will assume you are looking for a node module, and it will go and search that name in node_modules folder, not in your source code folder, so make sure to always add a relative path to where your file is located when using the “import” statement.

---

So far, we learned that webpack requires us to have an src/index.js file to produce a dist/main.js compiled file. That’s the default webpack uses (also called “zero config”) as a ready-to-go configuration

---

With webpack we have the ability to customize a lot of things (including files name and their destination) by using a file called webpack.config.js (that’s the name webpack will look for by default). In order to configure itself, you can surely name it something else other than webpack.config.js (for example, “my-config.js” or any other naming you like), but if you do so, just make sure to specify this in the package.json file:

scripts: {
	"build": "webpack --config my-config.js"
} 

---

module.exports = {
	entry: "./src/index.js",
	output: {
		filename: "../build/application.js"
	}
}

All we need to do is to replace “main.js” by “…/build/application.js”. Because the default output folder is “dist,” we tell webpack to go back by one step and have our output file “application.js” placed in a new folder called “build.”

---

As you might be guessing, the other value that we can use for “mode” option is “development,” so let’s set “mode” to “development,” but this time we prefer to add it to “webpack.config.js” file instead of adding it directly to webpack command. This way we can have all our options in one place.

---

To use Babel, webpack provides us with a loader called “babel-loader,” which is easy and straightforward to use, so let’s install it first using our terminal:

$ npm install --save-dev babel-loader @babel/core @babel/preset-env

If you are wondering how to know what to install exactly in order to get Babel working, the answer is documentation! In order to install any loader or plugin, all you have to do is to search for “Webpack + the name of loader/plugin,” then most likely the first link will direct you to the documentation page of that loader or plugin (either webpack website or a GitHub repository) where more details are explained.

---

CommonJS
JavaScript is a powerful object oriented language with some of the fastest dynamic language interpreters around. The official JavaScript specification defines APIs for some objects that are useful for building browser-based applications. However, the spec does not define a standard library that is useful for building a broader range of applications.
The CommonJS API will fill that gap by defining APIs that handle many common application needs, ultimately providing a standard library as rich as those of Python, Ruby and Java. The intention is that an application developer will be able to write an application using the CommonJS APIs and then run that application across different JavaScript interpreters and host environments. With CommonJS-compliant systems, you can use JavaScript to write:
• Server-side JavaScript applications
• Command line tools
• Desktop GUI-based applications
• Hybrid applications (Titanium, Adobe AIR)
Read an additional introduction by Kris Kowal at Ars Technica.

From http://www.commonjs.org/

---

你可以使用我们定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

From https://developer.aliyun.com/mirror/NPM?from=tnpm

如果以下安装不成功，可以改用cnpm进行安装

$ npm install image-webpack-loader --save-dev

---

解决raw.githubusercontent.com无法连接问题
解决方法如下：
点击进入https://site.ip138.com/raw.githubusercontent.com/
输入域名查询自己的IP地址
管理员身份运行命令行：
1. 首先ping命令选取延迟低的IP地址
2.在命令行执行以下命令：

在打开的hosts文件中，添加
199.232.68.133 raw.githubusercontent.com
备注：此IP需改成上面ping命令返回的IP地址中的一个)

保存重新运行vscode，问题解决
From https://blog.youkuaiyun.com/weixin_37636605/article/details/107077773

如果上述方法无法解决，可以删除node_modules文件夹后重新运行npm install

---

webpack-dev-server loads and serves any bundled file from memory instead of the local filesystem. If any resource (HTML, JS, CSS,
etc.) is not found in memory, webpack-dev-server will look at the “contentBase” path and try to find the missed file there. When no “contentBase” option is set, it will look at the root of the working directory.

---

In case the third-party library you installed doesn’t include a package.json
file, you can use a relative path to import it from node_modules (i.e., import lib from “../node_modules/lib_folder/lib.js”).