安装webpack上

易雅畅

2023-12-01

win+r -----------cmd ----------enter

在控制台

说明：控制台我都用紫色表示

Microsoft Windows [版本 10.0.17134.407]
(c) 2018 Microsoft Corporation。保留所有权利。

C:\Users\admin>npm i webpack
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\admin\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\admin\package.json'
npm WARN admin No description
npm WARN admin No repository field.
npm WARN admin No README data
npm WARN admin No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack@4.26.0
added 321 packages from 278 contributors and audited 4152 packages in 52.339s
found 0 vulnerabilities

C:\Users\admin>npm -v
6.4.1

C:\Users\admin>webpack -v
'webpack' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

C:\Users\admin>npm i webpack -g
C:\Users\admin\AppData\Roaming\npm\webpack -> C:\Users\13988\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\webpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack@4.26.0
added 321 packages from 278 contributors in 13.172s

C:\Users\admin>webpack -v
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
- webpack-cli (https://github.com/webpack/webpack-cli)
The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no): yes
Installing 'webpack-cli' (running 'npm install -D webpack-cli')...
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\admin\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\admin\package.json'
npm WARN admin No description
npm WARN admin No repository field.
npm WARN admin No README data
npm WARN admin No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack-cli@3.1.2
added 58 packages from 15 contributors and audited 16132 packages in 15.783s
found 0 vulnerabilities

4.26.0

C:\Users\admin>npm i webpack-cli -g
C:\Users\admin\AppData\Roaming\npm\webpack-cli -> C:\Users\admin\AppData\Roaming\npm\node_modules\webpack-cli\bin\cli.jsnpm WARN webpack-cli@3.1.2 requires a peer of webpack@^4.x.x but none is installed. You must install peer dependencies yourself.

+ webpack-cli@3.1.2
added 84 packages from 26 contributors in 8.392s

C:\Users\admin>webpack-cli -v
3.1.2

C:\Users\admin>npm i cnpm -g
npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
C:\Users\admin\AppData\Roaming\npm\cnpm -> C:\Users\admin\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
+ cnpm@6.0.0
added 632 packages from 844 contributors in 60.407s

C:\Users\admin>cnpm -v
cnpm@6.0.0 (C:\Users\admin\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.4.1 (C:\Users\admin\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@10.13.0 (D:\nodes\node.exe)
npminstall@3.16.0 (C:\Users\admin\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\admin\AppData\Roaming\npm
win32 x64 10.0.17134
registry=https://registry.npm.taobao.org

C:\Users\admin>npm i nrm -g
npm WARN deprecated coffee-script@1.7.1: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Users\admin\AppData\Roaming\npm\nrm -> C:\Users\admin\AppData\Roaming\npm\node_modules\nrm\cli.js
+ nrm@1.0.2
added 324 packages from 564 contributors in 28.561s

C:\Users\admin>nrm ls

* npm ---- https://registry.npmjs.org/
cnpm --- http://r.cnpmjs.org/
taobao - https://registry.npm.taobao.org/
nj ----- https://registry.nodejitsu.com/
rednpm - http://registry.mirror.cqupt.edu.cn/
npmMirror https://skimdb.npmjs.com/registry/
edunpm - http://registry.enpmjs.org/

C:\Users\admin>nrm use taobao
verb config Skipping project config: C:\Users\admin/.npmrc. (matches userconfig)

Registry has been set to: https://registry.npm.taobao.org/

C:\Users\13988>nrm ls

npm ---- https://registry.npmjs.org/
cnpm --- http://r.cnpmjs.org/
* taobao - https://registry.npm.taobao.org/
nj ----- https://registry.nodejitsu.com/
rednpm - http://registry.mirror.cqupt.edu.cn/
npmMirror https://skimdb.npmjs.com/registry/
edunpm - http://registry.enpmjs.org/

C:\Users\13988>nrm use cnpm
verb config Skipping project config: C:\Users\admin/.npmrc. (matches userconfig)

Registry has been set to: http://r.cnpmjs.org/

C:\Users\admin>nrm ls

npm ---- https://registry.npmjs.org/
* cnpm --- http://r.cnpmjs.org/
taobao - https://registry.npm.taobao.org/
nj ----- https://registry.nodejitsu.com/
rednpm - http://registry.mirror.cqupt.edu.cn/
npmMirror https://skimdb.npmjs.com/registry/
edunpm - http://registry.enpmjs.org/

C:\Users\admin>

然后在编译器中创建 webpack-study文件夹---->dist & src------>css文件夹 & images文件夹 & js文件夹 & index.html & index.js

然后打开Terminal

输入 cnpm init

然后一直回车，最后输入yes

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (webpack-study)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\webstom\WebstormProjects\untitled2\3班js\vue\vueDay7\webpack-
study\package.json:

{
"name": "webpack-study",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

Microsoft Windows [版本 10.0.17134.407]
(c) 2018 Microsoft Corporation。保留所有权利。

D:\webstom\WebstormProjects\untitled2\js\vue\vue\webpack-study>cnpm i jquer
y -D
√ Installed 1 packages
√ Run 0 scripts
√ All packages installed (1 packages installed from npm registry, used 874ms(network 871ms), speed 471.68kB/s, json 1(5.19kB), tarball 405.64kB)

D:\webstom\WebstormProjects\untitled2\js\vue\vue\webpack-study>webpack -v
4.26.0

D:\webstom\WebstormProjects\untitled2\js\vue\vue\webpack-study>webpackwebpack
'webpackwebpack' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

D:\webstom\WebstormProjects\untitled2\js\vue\vue\webpack-study>webpack .\src\index.js -o .\dist\main.js
Hash: 3c8541c5c47bb8159ec9
Version: webpack 4.26.0
Time: 2971ms
Built at: 2018-11-22 15:14:52
Asset Size Chunks Chunk Names
main.js 86.2 KiB 0 [emitted] main
Entrypoint main = main.js
[1] ./src/index.js 216 bytes {0} [built]
+ 1 hidden module

WARNING in configuration
The 'mode' option has not been set, webpack will fallback 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: https://webpack.js.org/concepts/mode/

D:\webstom\WebstormProjects\untitled2\js\vue\vue\webpack-study>webpack .\src\index.js -o .\dist\main.js --mode development
Hash: 3e37a6fa862b7831a41f
Version: webpack 4.26.0
Time: 386ms
Built at: 2018-11-22 15:17:36
Asset Size Chunks Chunk Names
main.js 305 KiB main [emitted] main
Entrypoint main = main.js
[./src/index.js] 216 bytes {main} [built]
+ 1 hidden module

D:\webstom\WebstormProjects\untitled2\js\vue\vue\webpack-study>webpack .\src\index.js -o .\dist\main.js --mode development
Hash: bd3d823863c0ce18f55d
Version: webpack 4.26.0
Time: 392ms
Built at: 2018-11-22 15:21:20
Asset Size Chunks Chunk Names
main.js 305 KiB main [emitted] main
Entrypoint main = main.js
[./src/index.js] 216 bytes {main} [built]
+ 1 hidden module

D:\webstom\WebstormProjects\untitled2\js\vue\vue\webpack-study>webpack .\src\index.js -o .\dist\main.js --mode development
Hash: e0b6e2c8acecad993390
Version: webpack 4.26.0
Time: 412ms
Built at: 2018-11-22 15:22:01
Asset Size Chunks Chunk Names
main.js 305 KiB main [emitted] main
Entrypoint main = main.js
[./src/index.js] 214 bytes {main} [built]
+ 1 hidden module

D:\webstom\WebstormProjects\untitled2\js\vue\vue\webpack-study>webpack .\src\index.js -o .\dist\main.js --mode development
Hash: b500873a10f7808504b1
Version: webpack 4.26.0
Time: 406ms
Built at: 2018-11-22 15:23:32
Asset Size Chunks Chunk Names
main.js 305 KiB main [emitted] main
Entrypoint main = main.js
[./src/index.js] 216 bytes {main} [built]
+ 1 hidden module

D:\webstom\WebstormProjects\untitled2\js\vue\vue\webpack-study>webpack .\src\index.js -o .\dist\main.js --mode development
Hash: 05f4cf213b7dd041fda7
Version: webpack 4.26.0
Time: 406ms
Built at: 2018-11-22 15:25:46
Asset Size Chunks Chunk Names
main.js 305 KiB main [emitted] main
Entrypoint main = main.js
[./src/index.js] 217 bytes {main} [built]
+ 1 hidden module

D:\webstom\WebstormProjects\untitled2\js\vue\vue\webpack-study>webpack .\src\index.js -o .\dist\main.js --mode development
Hash: 05f4cf213b7dd041fda7
Version: webpack 4.26.0
Time: 380ms
Built at: 2018-11-22 15:27:08
Asset Size Chunks Chunk Names
main.js 305 KiB main [emitted] main
Entrypoint main = main.js
[./src/index.js] 217 bytes {main} [built]
+ 1 hidden module

D:\webstom\WebstormProjects\untitled2\js\vue\vue\webpack-study>cnpm i webpack -D
/ [0/1] Installing isarray@1.0.0platform unsupported webpack@4.26.0 › watchpack@1.6.0 › chokidar@2.0.4 › fsevents@^1.2.2 Package require os(darwin) not compatib
le with your platform(win32)
[fsevents@^1.2.2] optional install error: Package require os(darwin) not compatible with your platform(win32)
√ Installed 1 packages
√ Run 0 scripts
peerDependencies link ajv@6.5.5 in D:\webstom\WebstormProjects\untitled2\js\vue\vue\webpack-study\node_modules\_ajv-keywords@3.2.0@ajv-keywords unmet wit
h D:\webstom\WebstormProjects\untitled2\js\vue\vue\webpack-study\node_modules\ajv(-)
peerDependencies link ajv@6.5.5 in D:\webstom\WebstormProjects\untitled2\3班js\vue\vueDay7\webpack-study\node_modules\_ajv-errors@1.0.0@ajv-errors unmet with D:
\webstom\WebstormProjects\untitled2\js\vue\vue\webpack-study\node_modules\ajv(-)
Recently updated (since 2018-11-15): 4 packages (detail see file D:\webstom\WebstormProjects\untitled2\js\vue\vueDay7\webpack-study\node_modules\.recently_up
dates.txt)
Today:
→ webpack@4.26.0 › terser-webpack-plugin@1.1.0 › cacache@11.3.1 › lru-cache@4.1.4 › yallist@^3.0.2(3.0.3) (07:22:36)
√ All packages installed (292 packages installed from npm registry, used 9s(network 9s), speed 549.54kB/s, json 270(487.7kB), tarball 4.46MB)

D:\webstom\WebstormProjects\untitled2\js\vue\vue\webpack-study>cnpm i webpack-cli -D
√ Installed 1 packages
√ Run 0 scripts
Recently updated (since 2018-11-15): 2 packages (detail see file D:\webstom\WebstormProjects\untitled2\js\vue\vue\webpack-study\node_modules\.recently_up
dates.txt)
√ All packages installed (58 packages installed from npm registry, used 2s(network 2s), speed 191.69kB/s, json 60(130.02kB), tarball 277.71kB)

D:\webstom\WebstormProjects\untitled2\js\vue\vue\webpack-study>cnpm i webpack-dveserver --save-dev
× Install fail! Error: GET https://registry.npm.taobao.org/webpack-dveserver response 404 status
Error: GET https://registry.npm.taobao.org/webpack-dveserver response 404 status
at get (C:\Users\13988\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\get.js:57:17)
at get.next (<anonymous>)
at onFulfilled (C:\Users\13988\AppData\Roaming\npm\node_modules\cnpm\node_modules\co\index.js:65:19)
at process._tickCallback (internal/process/next_tick.js:68:7)
npminstall version: 3.16.0
npminstall args: D:\nodes\node.exe C:\Users\13988\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\bin\install.js --fix-bug-versions --china --user
config=C:\Users\13988\.cnpmrc --disturl=https://npm.taobao.org/mirrors/node --registry=https://registry.npm.taobao.org webpack-dveserver --save-dev

D:\webstom\WebstormProjects\untitled2\js\vue\vue\webpack-study>cnpm i webpack-dev server --save-dev
√ Installed 2 packages
√ Run 0 scripts
√ All packages installed (270 packages installed from npm registry, used 10s(network 10s), speed 530.74kB/s, json 279(521.82kB), tarball 4.7MB)

D:\webstom\WebstormProjects\untitled2\js\vue\vue\webpack-study>cnpm i webpack-dev-server --save-dev
√ Installed 1 packages
√ Run 0 scripts
Recently updated (since 2018-11-15): 1 packages (detail see file D:\webstom\WebstormProjects\untitled2\js\vue\vue\webpack-study\node_modules\.recently_updates.txt)
√ All packages installed (72 packages installed from npm registry, used 5s(network 5s), speed 425.15kB/s, json 108(290.66kB), tarball 1.68MB)

D:\webstom\WebstormProjects\untitled2\js\vue\vue\webpack-study>webpack-dev-server
'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

D:\webstom\WebstormProjects\untitled2\js\vue\vue\webpack-study>cnpm i webpack-dev-server --save-dev
√ Installed 1 packages
√ Run 0 scripts
√ All packages installed (used 265ms(network 260ms), speed 57.05kB/s, json 1(14.83kB), tarball 0B)

D:\webstom\WebstormProjects\untitled2\js\vue\vue\webpack-study>cnpm run dev
npm ERR! missing script: dev

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\13988\AppData\Roaming\npm-cache\_logs\2018-11-22T07_46_39_772Z-debug.log

D:\webstom\WebstormProjects\untitled2\js\vue\vue\webpack-study>cnpm run dev

> webpack-study@1.0.0 dev D:\webstom\WebstormProjects\untitled2\js\vue\vue\webpack-study
> webpack-dev-server

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wdm｣: Hash: 2ea9d609895f34e44d38
Version: webpack 4.26.0
Time: 687ms
Built at: 2018-11-22 15:49:31
Asset Size Chunks Chunk Names
main.js 646 KiB main [emitted] main
Entrypoint main = main.js
[0] multi ./node_modules/_webpack-dev-server@3.1.10@webpack-dev-server/client?http://localhost:8080 ./src/index.js 40 bytes {main} [built]
[./node_modules/_ansi-html@0.0.7@ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/_ansi-regex@2.1.1@ansi-regex/index.js] 135 bytes {main} [built]
[./node_modules/_events@1.1.1@events/events.js] 8.13 KiB {main} [built]
[./node_modules/_html-entities@1.2.1@html-entities/index.js] 231 bytes {main} [built]
[./node_modules/_jquery@3.3.1@jquery/dist/jquery.js] 265 KiB {main} [built]
[./node_modules/_loglevel@1.6.1@loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/_strip-ansi@3.0.1@strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/_url@0.11.0@url/url.js] 22.8 KiB {main} [built]
[./node_modules/_webpack-dev-server@3.1.10@webpack-dev-server/client/index.js?http://localhost:8080] ./node_modules/_webpack-dev-server@3.1.10@webpack-dev-server/client?http://localhost:8080 7.78 KiB {m
ain} [built]
[./node_modules/_webpack-dev-server@3.1.10@webpack-dev-server/client/overlay.js] 3.58 KiB {main} [built]
[./node_modules/_webpack-dev-server@3.1.10@webpack-dev-server/client/socket.js] 1.05 KiB {main} [built]
[./node_modules/_webpack@4.26.0@webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] ./node_modules/webpack/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/index.js] 217 bytes {main} [built]
+ 12 hidden modules
i ｢wdm｣: Compiled successfully.
i ｢wdm｣: Compiling...
i ｢wdm｣: Hash: 7ea2da4a041e3e712c58
Version: webpack 4.26.0
Time: 38ms
Built at: 2018-11-22 16:12:21
Asset Size Chunks Chunk Names
main.js 646 KiB main [emitted] main
Entrypoint main = main.js
[./src/index.js] 217 bytes {main} [built]
+ 26 hidden modules
i ｢wdm｣: Compiled successfully.
i ｢wdm｣: Compiling...
i ｢wdm｣: Hash: f0617c6e56752dd1661f
Version: webpack 4.26.0
Time: 31ms
Built at: 2018-11-22 16:13:31
Asset Size Chunks Chunk Names
main.js 646 KiB main [emitted] main
Entrypoint main = main.js
[./src/index.js] 216 bytes {main} [built]
+ 26 hidden modules
i ｢wdm｣: Compiled successfully.
i ｢wdm｣: Compiling...
i ｢wdm｣: Hash: 7ea2da4a041e3e712c58
Version: webpack 4.26.0
Time: 42ms
Built at: 2018-11-22 16:13:51
Asset Size Chunks Chunk Names
main.js 646 KiB main [emitted] main
Entrypoint main = main.js
[./src/index.js] 217 bytes {main} [built]
+ 26 hidden modules
i ｢wdm｣: Compiled successfully.
i ｢wdm｣: Compiling...
i ｢wdm｣: Hash: f0617c6e56752dd1661f
Version: webpack 4.26.0
Time: 55ms
Built at: 2018-11-22 16:14:54
Asset Size Chunks Chunk Names
main.js 646 KiB main [emitted] main
Entrypoint main = main.js
[./src/index.js] 216 bytes {main} [built]
+ 26 hidden modules
i ｢wdm｣: Compiled successfully.

index代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--注意：不推荐在这里添加任何包-->
    <!--./:当前目录-->
    <!--/：根目录-->
    <!--../ ：返回上一级-->
    <script src="../main.js"></script>
</head>
<body>
<ul>
    <li>这是第1li</li>
    <li>这是第2li</li>
    <li>这是第3li</li>
    <li>这是第4li</li>
    <li>这是第5li</li>
    <li>这是第6li</li>
    <li>这是第7li</li>
    <li>这是第8li</li>
    <li>这是第9li</li>
    <li>这是第10li</li>
</ul>
</body>
</html>

index.js:

// index.js：项目的入口
//导入jquey
// import *** from  ***es6导入模块的方法
import $ from 'jquery'

$(function () {
    $('li:odd').css('backgroundColor','blue');
    $('li:even').css('backgroundColor','red');
})

webpack.config.js:

// 导入处理路径的模块
var path = require('path');

// 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
module.exports = {
    //配置打包模式为开发模式
    mode: 'development',
    entry: path.resolve(__dirname, 'src/index.js'), // 项目入口文件
    output: { // 配置输出选项
        path: path.resolve(__dirname, 'dist'), // 配置输出的路径
        filename: 'main.js' // 配置输出的文件名
    }
}

在package.json中显示：

{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1","dev":"webpack-dev-server  --open --port 3000 --contentBase src --hot"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jquery": "^3.3.1",
    "server": "^1.0.18",
    "webpack": "^4.26.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev": "^1.1.1",
    "webpack-dev-server": "^3.1.10"
  }
}

资料如下：

在网页中会引用哪些常见的静态资源？

.css .less .sass .scss

Images

.jpg .png .gif .svg

字体文件（Fonts）

.svg .ttf .eot .woff .woff2

网页中引入的静态资源多了以后有什么问题？？？

网页加载速度慢，因为我们要发起很多的二次请求；
要处理错综复杂的依赖关系

如何解决上述两个问题

合并、压缩、精灵图、图片的Base64编码
使用webpack可以解决各个包之间的复杂依赖关系；

什么是webpack?

webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；

如何完美实现上述的2种解决方案

使用Webpack，是基于整个项目进行构建的；

借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。
根据官网的图片介绍webpack打包的过程
webpack官网

webpack安装的两种方式

运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令
在项目根目录中运行npm i webpack安装到项目依赖中

初步使用webpack打包构建列表隔行变色案例

创建项目描述文件. 运行npm init -y初始化项目，使用npm管理项目中的依赖包
创建项目基本的目录结构src 和 dist,在src里新建index.html
使用npm i jquery -S安装jquery类库
创建index.js并书写各行变色的代码逻辑：

// 导入jquery类库
    import $ from 'jquery'

    // 设置偶数行背景色，索引从0开始，0是偶数
    $('#list li:even').css('backgroundColor','lightblue');
    // 设置奇数行背景色
    $('#list li:odd').css('backgroundColor','pink');

直接在页面上引用index.js会报错，因为浏览器不认识import这种高级的JS语法，需要使用webpack进行处理，webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法；
运行webpack 入口文件路径输出文件路径对index.js进行处理：

webpack .\src\js\index.js -o .\dist\main.js

7.而webpack4允许我们指定编译使用开发模式还是生产模式，这由mode这个配置来控制，value为枚举值：development/production，分别对应开发模式和生产模式（这个配置可以作为命令行的配置参数也可以作为配置文件中的一个配置项，默认值是production，即生产模式）。

设置打包模式为开发模式:  webpack .\src\js\index.js -o .\dist\main.js --mode development

使用webpack的配置文件简化打包时候的命令

在项目根目录中创建webpack.config.js
由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径：

   // 导入处理路径的模块
    var path = require('path');

    // 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
    module.exports = {
        //配置打包模式为开发模式
         mode: 'development',
        entry: path.resolve(__dirname, 'src/js/index.js'), // 项目入口文件
        output: { // 配置输出选项
            path: path.resolve(__dirname, 'dist'), // 配置输出的路径
            filename: 'main.js' // 配置输出的文件名
        }
    }

实现webpack的实时打包构建

由于每次重新修改代码之后，都需要手动运行webpack打包的命令，比较麻烦，所以使用webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。
由于依赖webpack, 要先在本地安装 npm i webpack -D
运行npm i webpack-dev-server --save-dev安装到开发依赖
安装完成之后，在命令行直接运行webpack-dev-server来进行打包，发现报错，此时需要借助于package.json文件中的指令，来进行运行webpack-dev-server命令，在scripts节点下新增"dev": "webpack-dev-server"指令，然后直接运行这个指令. npm run dev发现可以进行实时打包，但是dist目录下并没有生成main.js文件，这是因为webpack-dev-server`将打包好的文件放在了内存中

把main.js放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快
这个时候访问webpack-dev-server启动的http://localhost:8080/网站，发现是一个文件夹的面板，需要点击到src目录下，才能打开我们的index首页，此时引用不到main.js文件，需要修改index.html中script的src属性为:<script src="./main.js"></script>
为了能在访问http://localhost:8080/的时候直接访问到index首页，可以使用--contentBase src指令来修改dev指令，指定启动的根目录：

"dev": "webpack-dev-server --contentBase src"

配置端口号  配置自动打开浏览器  配置热更新(减少不必要的更新,只更新修改过得)
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"

同时修改index页面中script的src属性为<script src="main.js"></script>

使用`html-webpack-plugin`插件配置启动页面

由于使用--contentBase指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性，所以推荐大家使用html-webpack-plugin插件配置启动页面.

运行npm i html-webpack-plugin --save-dev安装到开发依赖
修改webpack.config.js配置文件如下：

   // 导入处理路径的模块
    var path = require('path');
    // 导入自动生成HTMl文件的插件
    var htmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
        entry: path.resolve(__dirname, 'src/js/index.js'), // 项目入口文件
        output: { // 配置输出选项
            path: path.resolve(__dirname, 'dist'), // 配置输出的路径
            filename: 'main.js' // 配置输出的文件名
        },
        plugins:[ // 添加plugins节点配置插件
            new htmlWebpackPlugin({
                template:path.resolve(__dirname, 'src/index.html'),//模板路径
                filename:'index.html'//自动生成的HTML文件的名称
            })
        ]
    }

实现自动打开浏览器、热更新和配置浏览器的默认端口号

注意：热更新在JS中表现的不明显，可以从一会儿要讲到的CSS身上进行介绍说明！

方式1：

修改package.json的script节点如下，其中--open表示自动打开浏览器，--port 4321表示打开的端口号为4321，--hot表示启用浏览器热更新：

"dev": "webpack-dev-server --hot --port 4321 --open"

方式2：

修改webpack.config.js文件，新增devServer节点如下：

devServer:{
        hot:true,
        open:true,
        port:4321
    }

在头部引入webpack模块：

var webpack = require('webpack');

在plugins节点下新增：

new webpack.HotModuleReplacementPlugin()

使用webpack打包css文件

运行npm i style-loader css-loader --save-dev
修改webpack.config.js这个配置文件：

module: { // 用来配置第三方loader模块的
        rules: [ // 文件的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
        ]
    }

注意：use表示使用哪些模块来处理test所匹配到的文件；use中相关loader模块的调用顺序是从后向前调用的；

使用webpack打包less文件

运行npm i less-loader less -D
修改webpack.config.js这个配置文件：

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

使用webpack打包sass文件

运行npm i sass-loader node-sass --save-dev
在webpack.config.js中添加处理sass文件的loader模块：

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

使用webpack处理css中的路径

运行npm i url-loader file-loader --save-dev
在webpack.config.js中添加处理url路径的loader模块：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }

可以通过limit指定进行base64编码的图片大小；只有小于指定字节（byte）的图片才会进行base64编码：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960(这里填写图片大小是多少字节的)' },

使用babel处理高级JS语法

运行npm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安装babel转换器的相关loader包
运行npm i babel-preset-env babel-preset-stage-0 --save-dev安装babel转换的语法
在webpack.config.js中添加相关loader模块，其中需要注意的是，一定要把node_modules文件夹添加到排除项：

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

在项目根目录中添加.babelrc文件，并修改这个配置文件如下：

{
    "presets":["env", "stage-0"],
    "plugins":["transform-runtime"]
}

注意：之前语法插件babel-preset-es2015可以更新为babel-preset-env，它包含了所有的ES相关的语法；
报错,需要安装npm i babel-loader@7 -D

在webpack中配置.vue组件页面的解析

运行npm i vue -S将vue安装为运行依赖；
运行npm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖；
由于新版本不支持. 可以下载指定版本 npm i vue-loader@14.2.2 -D
运行npm i style-loader css-loader -D将解析转换CSS的包安装为开发依赖，因为.vue文件中会写CSS样式；
在webpack.config.js中，添加如下module规则：

module: {

    rules: [

      { test: /\.css$/, use: ['style-loader', 'css-loader'] },

      { test: /\.vue$/, use: 'vue-loader' }

    ]

  }

创建App.js组件页面：

   <template>

      <!-- 注意：在 .vue 的组件中，template 中必须有且只有唯一的根元素进行包裹，一般都用 div 当作唯一的根元素 -->

      <div>

        <h1>这是APP组件 - {{msg}}</h1>

        <h3>我是h3</h3>

      </div>

    </template>



    <script>

    // 注意：在 .vue 的组件中，通过 script 标签来定义组件的行为，需要使用 ES6 中提供的 export default 方式，导出一个vue实例对象

    export default {

      data() {

        return {

          msg: 'OK'

        }

      }

    }

    </script>



    <style scoped>

    h1 {

      color: red;

    }

    </style>

创建main.js入口文件：

   // 导入 Vue 组件

    import Vue from 'vue'



    // 导入 App组件

    import App from './components/App.vue'



    // 创建一个 Vue 实例，使用 render 函数，渲染指定的组件

    var vm = new Vue({

      el: '#app',

      render: c => c(App)

    });

在使用webpack构建的Vue项目中使用模板对象？

在webpack.config.js中添加resolve属性：

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.js'
    }
  }

在vue组件页面中，集成vue-router路由模块

vue-router官网

1.安装路由

npm i vue-router -S

导入路由模块：

import VueRouter from 'vue-router'

安装路由模块：

Vue.use(VueRouter);

导入需要展示的组件:

import login from './components/account/login.vue'

import register from './components/account/register.vue'

创建路由对象:

var router = new VueRouter({

  routes: [

    { path: '/', redirect: '/login' },

    { path: '/login', component: login },

    { path: '/register', component: register }

  ]

});

将路由对象，挂载到 Vue 实例上:

var vm = new Vue({

  el: '#app',

  // render: c => { return c(App) }

  render(c) {

    return c(App);

  },

  router // 将路由对象，挂载到 Vue 实例上

});

改造App.vue组件，在 template 中，添加router-link和router-view：

   <router-link to="/login">登录</router-link>

    <router-link to="/register">注册</router-link>



    <router-view></router-view>

组件中的css作用域问题

抽离路由为单独的模块

使用饿了么的 MintUI 组件

Github 仓储地址

Mint-UI官方文档

1.安装

npm i mint-ui -S

导入所有MintUI组件：

import MintUI from 'mint-ui'

导入样式表：

import 'mint-ui/lib/style.css'

在 vue 中使用 MintUI：

Vue.use(MintUI)

使用的例子：

<mt-button type="primary" size="large">primary</mt-button>

使用 MUI 组件

官网首页

文档地址

导入 MUI 的样式表：

import '../lib/mui/css/mui.min.css'

在webpack.config.js中添加新的loader规则：

{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader' }

根据官方提供的文档和example，尝试使用相关的组件

使用font-awesome字体图标库

安装   npm install font-awesome

导入   import 'font-awesome/css/font-awesome.css'

按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

Mint-UI中按需导入的配置方式

使用 MUI 代码片段

注意： MUI 不同于 Mint-UI，MUI只是开发出来的一套好用的代码片段，里面提供了配套的样式、配套的HTML代码段，类似于 Bootstrap；而 Mint-UI，是真正的组件库，是使用 Vue 技术封装出来的成套的组件，可以无缝的和 VUE项目进行集成开发；因此，从体验上来说， Mint-UI体验更好，因为这是别人帮我们开发好的现成的Vue组件；从体验上来说， MUI和Bootstrap类似；理论上，任何项目都可以使用 MUI 或 Bootstrap，但是，MInt-UI只适用于Vue项目；

注意： MUI 并不能使用 npm 去下载，需要自己手动从 github 上，下载现成的包，自己解压出来，然后手动拷贝到项目中使用；

官网首页

文档地址

导入 MUI 的样式表：

import '../lib/mui/css/mui.min.css'

在webpack.config.js中添加新的loader规则：

{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader' }

根据官方提供的文档和example，尝试使用相关的组件

将项目源码托管到gitHub中

点击头像 -> 修改资料 -> SSH公钥如何生成SSH公钥
创建自己的空仓储，使用 git config --global user.name "用户名" 和 git config --global user.email ***@**.com 来全局配置提交时用户的名称和邮箱
使用 git init 在本地初始化项目
使用 touch README.md 和 touch .gitignore 来创建项目的说明文件和忽略文件；
开源项目都有一个开源协议. 复制LICENSE到自己的根目录去
使用 git add . 将所有文件托管到 git 中
使用 git commit -m "init project" 将项目进行本地提交
使用 git remote add origin 仓储地址将本地项目和远程仓储连接，并使用origin最为远程仓储的别名
使用 git push -u origin master 将本地代码push到仓储中

App.vue 组件的基本设置

头部的固定导航栏使用 Mint-UI 的 Header 组件；
底部的页签使用 mui 的 tabbar;
购物车的图标，使用 icons-extra 中的 mui-icon-extra mui-icon-extra-cart，同时，应该把其依赖的字体图标文件 mui-icons-extra.ttf，复制到 fonts 目录下！
将底部的页签，改造成 router-link 来实现单页面的切换；
Tab Bar 路由激活时候设置高亮的两种方式：

全局设置样式如下：

.router-link-active{

      	color:#007aff !important;

    }

或者在 new VueRouter 的时候，通过 linkActiveClass 来指定高亮的类：

// 创建路由对象

    var router = new VueRouter({

      routes: [

        { path: '/', redirect: '/home' }

      ],

      linkActiveClass: 'mui-active'

    });

实现 tabbar 页签不同组件页面的切换

将 tabbar 改造成 router-link 形式，并指定每个连接的 to 属性；
在入口文件中导入需要展示的组件，并创建路由对象：

// 导入需要展示的组件

    import Home from './components/home/home.vue'

    import Member from './components/member/member.vue'

    import Shopcar from './components/shopcar/shopcar.vue'

    import Search from './components/search/search.vue'



    // 创建路由对象

    var router = new VueRouter({

      routes: [

        { path: '/', redirect: '/home' },

        { path: '/home', component: Home },

        { path: '/member', component: Member },

        { path: '/shopcar', component: Shopcar },

        { path: '/search', component: Search }

      ],

      linkActiveClass: 'mui-active'

    });

使用 mt-swipe 轮播图组件

假数据：

lunbo: [

        'http://www.itcast.cn/images/slidead/BEIJING/2017440109442800.jpg',

        'http://www.itcast.cn/images/slidead/BEIJING/2017511009514700.jpg',

        'http://www.itcast.cn/images/slidead/BEIJING/2017421414422600.jpg'

      ]

引入轮播图组件：

<!-- Mint-UI 轮播图组件 -->

    <div class="home-swipe">

      <mt-swipe :auto="4000">

        <mt-swipe-item v-for="(item, i) in lunbo" :key="i">

          <img :src="item" alt="">

        </mt-swipe-item>

      </mt-swipe>

    </div>

  </div>

在`.vue`组件中使用`vue-resource`获取数据

运行npm i vue-resource -S安装模块
导入 vue-resource 组件

import VueResource from 'vue-resource'

在vue中使用 vue-resource 组件

Vue.use(VueResource);

全局配置请求的根路径

Vue.http.options.root = 'http://www.liulongbin.top:3005';

使用mui的`tab-top-webview-main`完成分类滑动栏

兼容问题

和 App.vue 中的 router-link 身上的类名 mui-tab-item 存在兼容性问题，导致tab栏失效，可以把mui-tab-item改名为mui-tab-item1，并复制相关的类样式，来解决这个问题；

.mui-bar-tab .mui-tab-item1.mui-active {
      color: #007aff;
    }

    .mui-bar-tab .mui-tab-item1 {
      display: table-cell;
      overflow: hidden;
      width: 1%;
      height: 50px;
      text-align: center;
      vertical-align: middle;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #929292;
    }

    .mui-bar-tab .mui-tab-item1 .mui-icon {
      top: 3px;
      width: 24px;
      height: 24px;
      padding-top: 0;
      padding-bottom: 0;
    }

    .mui-bar-tab .mui-tab-item1 .mui-icon~.mui-tab-label {
      font-size: 11px;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
    }

tab-top-webview-main组件第一次显示到页面中的时候，无法被滑动的解决方案：

先导入 mui 的JS文件:

import mui from '../../../lib/mui/js/mui.min.js'

在组件的 mounted 事件钩子中，注册 mui 的滚动事件：

mounted() {
    	// 需要在组件的 mounted 事件钩子中，注册 mui 的 scroll 滚动事件
        mui('.mui-scroll-wrapper').scroll({
          deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        });
  	}

滑动的时候报警告：Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

解决方法，可以加上* { touch-action: none; } 这句样式去掉。

原因：（是chrome为了提高页面的滑动流畅度而新折腾出来的一个东西） http://www.cnblogs.com/pearl07/p/6589114.html https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action