开发者学堂课程【React 入门与实战：使用 webpack4.x 构建项目的步骤】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/585/detail/8077
使用 webpack4.x 构建项目的步骤
目录
一、运行 npm init -y
二、创建目录
三、在 src 下创建 index.html
四、使用 cnpm 安装
五、注意
创建基本的 webpack4.x 项目
1、运行 npm init -y
首先创建一个文件夹名位 01.webpack-base，在使用 Visual Studio Code 打开。打开之后我们要先快速初始化一个项目，代码：npm init -y。它会创建 package 配置文件。以后创建的包什么的都会在这里面来记录。
2、 创建目录
在 01.webpack-base 旁边有一个新建项目的（如下图：），
新建一个 src 项目，用来存放所有项目的原代码。还有一个是 dist 文件，为什么使用 dist 因为 react 创建的时候/ dist 的路径，这个 dist 代表的是项目做好之后发布的一个产品，最终要发布在我们的 dist 里面中去，开源也是这样做的。
3、在src下创建 index.html
在 src 下面新建一个 index.html，代码如下：
代码：
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Index首页</title>
</head>
<body>
<h1>这是首页</h1>
</ body>
</html>
在 src 下创建一个 main.js 文件，代码如下：
代码：
// 假设，main.js 还是我们的入口文件
Console.log(‘ok’)
4、使用 cnpm 安装
配置淘宝镜像，但是使用 npm 就直接自己装了，在终端安装。（代码如下：）
代码：
cnpm I webpack webpack-cli -D
*全局运行 ‘npm I cnpm -g’
点开 package.json 查看版本：
代码：
"name": "01.webpack-base",
"version" : "1.0.0",
"description": "",
"main": "index.js",
"scripts" : {
"test": "echo \"Error: no test specified\" && exit 1"},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpacki: "^4.1.1"
}
}
但是还是要去传一个包，代码：cnpm I webpack-cli -D。
在终端输入，webpack 就可以进入打包空间。之前进入打包空间，在 package.json 创建一个 dev。在 script 里面添加一个“dev”：“webpack”，后面在指定一个配置文件。在终端里面输入 webpack或者在 package.json 里面的 script 中添加 dev，都是一样的。“dev”：“webpack”是 webpack 命令行提供的。重新在到终端打一次包，它就报了一次警告：
代码：
WARNING in configuration
The 'mode’ option has not been set. Set 'mode’option to
'development’ or 'production’to enable default:for this
environment.
打包失败！大概意思是：没有设置 mode 这个选项。Webpack 有一个配置文件，在 src 下创建 webpack.Config.js的一个 js 文件。Webpack.config.js代码如下：
代码：
//向外暴露一个打包的配置对象;因为 webpack 是基于 Node 构建的;所以 webpack 支持所有 Node API 和语法
module.exports = {
mode: 'development' //development production
}
//行不行 目前不行
export default {}
然后在使用 webpack ，在报错。
代码：
ERR0R in Entry module not foundT Eror: Can't resolve './snc'
in 'c: lUsers\liulongbin\Desktoplreact-day八代
\e1.webpack-base'
这个主要报错的是没有找到入口文件，是因为在webpack.config.js中没有配置入口文件。
在 webpack 4.x中，有一个很大的特性，就是约定大于配置约定，默认的打包入口路径是src -> index.js
已经有了这个就不需要了，所以把 main.js 重新命名一下，改为 index.js。（代码如下：）
代码：
//假设，main.js 还是我们的入口文件
Console.log(“ok”)
就不用写 option ，它默认是把 src 下的 index.js 当作入口，然后在到终端里面去输入 webpack 。
然后结果为，下列代码：
Hash: 423ac0b62c60f9ef8e85Version: webpack 4.1.1
Time: 100ms
Built at: 2018-3-1910:57:03AssetsizeChunks chunk Names
main.js2.85 KiBmain [emitted]main
Entrypoint main = main.js
[./ src/index.is142 bytes {main}「built]
文件打包好后会在 dist 中出现一个 js 文件，main.js 文件，可以打开观察一下。
然后把这个 js 文件手动导入进 index.html 中去，导入到 head 标签里面，导入这行代码，然后保存，在到浏览器中去看（如下图：）。
把 webpack.config.js 中的 mode 中的 ok 改为 production ，然后在到终端打包，在卡 main.js 文件。
代码：
function(e) { var n=( } ;function r(t)《if(n[t])return n[t].exports ;var o=n[t]=(i:t,T J,e嗟石} ;return e[t].call(o.exports,o ,o.exports ,r ) , o.1=!0 ,o.exports }r.m=e ,r.c=n,r.d=iunction(e,n,t){(r.o(e ,n)ll0bject.defineProperty(e,n , {configurable: !1,enumerable:! 0 ,get:t}) } ,r.z=function(e){bject.defineProperty(e , "_esModule" ,{value:!0}) } ,r.n=function(e) {var n=e&ke._esModule?function() {return e.default} : function() {return e) ;return r.d(n , " a " ,n) ,n} ,r.o=function(e,n){return Object.prototype .hasOwnProperty.call(e,n) } ,r.p="" ,r(r.s=0)》( [function(e,n) {console.log("ok ")}]);
5、注意: webpack 4.x 提供了约定大于配置的概念;目的是为了尽量减少配置文件的体积;
默认约定了:
打包的入口是 src-> index.js
打包的输出文件是 dist-> `main.js |
