资源下载
复刻Udacity的一个webpack实例app到自己github仓库并克隆。命令：
git clone https://github.com/<Your Github Username>/fend-webpack-content.git
cd fend-webpack-content
git checkout 0-initial-setup
git branch
npm的安装与使用
查看node和npm的版本：
node -v
npm -v
将npm更新到最新版本：
npm install -g npm@latest
npm install
如果npm install抛出错误，尝试清空缓存并重装：
npm cache clean
[sudo] npm install -g npm
npm install
如果需要修复漏洞，运行npm audit fix
使用npm run start启动你的项目。
输入网址http://localhost:8080/查看你的网站，也可以在server.js中更改运行的端口。（更改端口node篇有提）
Webpack的安装
- 安装Webpack
npm i webpack webpack-cli
npm i只是npm install的缩写。CLI （command-line interface）是一个允许开发者通过在命令行运行命令与Webpack交流的终端程序。
- 运行后可以在package.json中看到
webpack和webpack-cli被加入“dependencies”：
"dependencies": {
"express": "^4.17.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
},
"scripts": {
"build": "webpack"
},
最后加上:
"devDependencies":{
"webpack-dev-server": "^3.11.0",
},
const path = require("path")
const webpack = require("webpack")
module.exports = {
}
//这时候运行会报错
关于Webpack Entry
webpack会为我们创建一个叫做“依赖关系树”的东西，依赖关系树从一个文件开始，随着webpack浏览过该文件，它会查找这一文件所需的其他依赖项，假设这个文件是一个javascript文件，其中使用了一个来自其他文件的函数，当webpack发现需要另外一个文件时，它会跳转到那个需要的文件，浏览一遍，如果在那个文件中找到更多依赖项，再跳转到运行该文件所必需的每个依赖项，以此类推构建出我们所说的“依赖关系树”。
要构建这个依赖关系树，webpack就需要一个起点，叫做Entry。
webpack自己会默认的设置入口（./src/index.js），但是由于我们使用express改变了项目的目录结构，src中并不存在index.js, 因此需要将entry替换成对应的路径。
webpack.config.js，设置module.exports:
module.exports = {
entry: './src/client/index.js'
}
然后运行npm run build，完成后会发现根目录多了一个dist（distribution）文件夹，这是webpack生成的。
dist文件夹
dist是distribution的缩写，表示分发，与源文件夹src并列。这两个文件夹都十分重要。源文件夹包含所有你需要编辑的文件，分发文件夹是负责网页运行时的分发。因此用户正在运行的网站引用的是分发文件夹而不是源文件。每一次运行，分发文件夹都会重新生成，因此如果你想永久改变文件内容比如一个按钮的css样式，应该在源文件夹改，如果您想快速看到效果可以在分发文件夹中进行尝试。
现在，可以将dist文件夹下的main.js文件引入index.js，并删除其他引用了。
Babel的安装与使用
Babel是一个专用工具，能进行Javascript的版本切换，我们可以借助它运行ES6，它可以将所有新语法翻译成浏览器可以识别的预防，这样即使浏览器还没有提供支持，也可以使用更新版本的javascript语法。
- 安装Babel
npm i -D @babel/core @babel/preset-env babel-loader
-D意味着将其安装到开发环境中，这意味着现在安装的所有软件包不是用于应用的生产环境，仅在开发过程中可用，不需要在向用户提供应用服务时出现。
2.在根目录创建一个新文件.babelrc,输入：
{ ‘presets’: ['@babel/preset-env'] }
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
