Part4-Webpack与脚手架

一、Webpack(熟悉)

从本质上来说，webpack是一个静态模块打包工具。
要想让我们写好的模块化代码在各式各样的浏览器上能做到兼容，就必须借助于其他工具；而webpack的其中一个核心就是让我们可以进行模块化开发，并帮我们处理模块间的依赖关系。不仅仅是Javascript文件，我们的css、图片、json文件等在webpack中都可以当作模块来使用，这就是webpack的模块化概念。

1. gulp和webpack

Gulp侧重于前端开发的 整个过程 的控制管理（像是流水线），我们可以通过给gulp配置不同的task（通过Gulp中的gulp.task()方法配置，比如启动server、sass/less预编译、文件的合并压缩等等）来让gulp实现不同的功能，从而构建整个前端开发流程。

gulpfile.js

var gulp = require('gulp');
var uglify = require('gulp-uglify'); //压缩代码

// 压缩js
gulp.task('uglify',function(){
    var combined = combiner.obj([
        gulp.src('src/scripts/**/*.js'), //需要压缩的js文件路径
        sourcemaps.init(),
        uglify(), //压缩js
        sourcemaps.write('./'),
        gulp.dest('dest/scripts') //生成的js文件的目录
    ]);
});

//默认任务
gulp.task('default',['uglify']);

Webpack有人也称之为 模块打包机 ，由此也可以看出Webpack更侧重于模块打包，当然我们可以把开发中的所有资源（图片、js文件、css文件等）都可以看成模块，最初Webpack本身就是为前端JS代码打包而设计的，后来被扩展到其他资源的打包处理。Webpack是通过loader（加载器）和plugins（插件）对资源进行处理的。

2. webpack初体验

1. 生成项目依赖文件

// 执行后生成package.json文件
npm init -y

2. 安装依赖

// 最后的参数-D是安装到package.json的开发依赖devDependencies(开发环境)对象里，也可以用 --save-dev代替
npm install webpack webpack-cli -D

// -S是--save的简写，这样安装的话，会安装到dependencies(生产环境)对象里，也可以用 --save代替
npm install jquery -S

// package.json
{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.58.1",
    "webpack-cli": "^4.9.0"
  },
  "dependencies": {
    "jquery": "^3.6.0"
  }
}

devDependencies与dependencies的区别：
在发布npm包的时候，本身dependencies下的模块会作为依赖，一起被下载；devDependencies下面的模块就不会自动下载了；但对于项目而言，npm install 会自动下载devDependencies和dependencies下面的模块。

3.创建入口文件

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>Document</title>
</head>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
<script src="./src/index.js"></script>
</html>

src/index.js：

import $ from 'jquery'
$('ul li:even').css({background: 'red'})
$('ul li:odd').css({background: 'green'})

在浏览器打开

为什么会这样？因为浏览器并不兼容import引入模块这种方式，所以我们要用到webpack打包

4. 通过webpack打包

webpack.config.js：

const path = require('path');

module.exports = {
  mode: "development",
  entry: path.join(__dirname, './src/index.js'),	// dirname代表索引到文件所在目录
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'main.js'
  }
}

package.json：

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

然后修改 index.html:

<script src="./dist/main.js"></script>

再打开 index.html，就可以观察到：

5.webpack-dev-server

这时候如果修改index.html的背景颜色red改成是gray，会发现浏览器刷新也没有效果，需要再跑一次npm run start命令才有用，这时候就需要webpack-dev-server(热重载)

安装：

npm install webpack-dev-server -D

package.json：

"scripts": {
	"start": "webpack-dev-server --open --port 3002 --hot",
  "build": "webpack --config webpack.config.js"
}

// --open 自动打开浏览器
// --port 服务监听的端口 3002
// --hot  自动更新

这里注意：
1、启动webpack-dev-server后，你在目标文件夹中是看不到编译后的文件的，实时编译后的文件都保存到了内存当中。想看到main.js文件，可以运行localhost:3002/main.js查看

index.html

<script src="./main.js"></script>

至此，通过 npm run start 我们仍然无法访问html页面，因为打包出来的dist被隐藏，同时它也并不包含 index.html ，所以会有 Cannot GET / 的警告。

接下来，我们解决html的问题：

6. html-webpack-plugin

安装：npm install html-webpack-plugin -D

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: "development",	// development-开发环境。 production-生产环境
  entry: path.join(__dirname, './index.js'),
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'main.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, './index.html')
    })
  ]
}

删掉index.html文件里面的main.js引用，因为html-webpack-plugin会自动把打包出来的bundle自动加到我们的index.html代码里

重新运行 npm run start，即可看到：

并且，此时你随意修改 index.js 中的代码，界面也会实时更新。

7. css-loader

创建一个index.css

index.css

body {
    background: skyblue;
}

index.js

import $ from 'jquery';
$('ul li:even').css({background: 'gray'});
$('ul li:odd').css({background: 'green'});

import './index.css';

为什么报错，因为webpack默认是不识别.css文件的，需要我们通过 loader 将 .css 文件进行解释成正确的模块。

安装css-loader和style-loader

npm install css-loader style-loader -D 
//index.css -> bundle.js -> style-loader -> <style> index.html
// css-loader的作用是将index.css文件解析为webpack能识别的模块，然后打包进bundle.js里面，但是这样样式并未成功显示在浏览器中。
// style-loader的作用就是将打包到bundle.js中的样式绑定到浏览器上，以style标签的形式显示出来

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: "development",	// development-开发环境。 production-生产环境
  entry: path.join(__dirname, './index.js'),
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, './index.html'),
      filename: 'index.html'
    })
  ],
  module: {
    rules: [{
      test: /\.css$/,
      use: ['style-loader', 'css-loader']	// 注意：这里的数组是反向读取的（即从右往左）
    }]
  }
}

再重新执行一次 npm run start 即可看到样式变化，同时，如果修改样式的话，也可以实时更新。

补充：引入的文件是less
安装：npm install less-loader less -D
规则：
{
test: /.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}

8. ES6 转 ES5

安装

npm install babel-loader @babel/core @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/preset-env @babel/runtime -D

配置loader

{
  test: /\.js$/,
  use: [{
    loader: 'babel-loader',
    options: {
      presets: [
        '@babel/preset-env'
      ],
      plugins: [
        [require("@babel/plugin-transform-runtime"), { "legacy": true }],
        [require("@babel/plugin-proposal-class-properties"), { "legacy": true }]
      ]
    }
  }],
  exclude: /node_modules/
}

exclude表示排除掉 node_modules下载的依赖项。这样可以加速网站开发，而且我们也只需要对我们的项目src

源文件进行编译即可。

在 src/index.js 中引入es6语法

const fn = () => {
  console.log(123)
}

fn()

执行命令编译

npm run start

编译后的结果

var fn = function fn() {\n    console.log(123);\n}

至此关于webpack的基本配置已经到这里。

9. html热更新

在安装过html-webpack-plugin之后，安装：

npm install --save-dev raw-loader

在index.js中引入index.html

import '../index.html';

在webpack.config.js中配置raw-loader:

module.exports = {
  ......
  module: {
    rules: [
      {
         test: /\.(htm|html)$/,
         use: [
           'raw-loader'
         ]
      },
      ......
    ]
  }
}

10、图片资源

webpack5开始，不再需要安装loader来支持图片加载与打包。

给 webpack.config.js 添加：

{
  test: /\.(png|gif|svg|jpe?g)$/,
    /* 
      asset/resource - 把指定资源拷贝对对应的目录
      asset/inline - 直接转base64，不产生图片
    */
    // type: 'asset/inline',
    type: 'asset/resource',
      generator: {
        filename: 'img/[name].[hash:4][ext]'
      }
},

然后给 index.html 写入：

<div class="logo"></div>
<img src="" alt="">

再到 index.less 写入：

.logo{
  width: ...;
  height: ...;
  background: url(./assets/images/logo.png);	// 这里图片自己找即可，要放在src/assets/images
}

再到 index.js 写入：

import logo from "./assets/images/logo.png"

document.getElementsByTagName('img')[0].src = logo;

然后运行 npm run start 即可看到图片，或是运行 npm run build 查看打包后的结果，并双击 dist/index.html 手动打开页面查看效果。

二、什么是Vue CLI(掌握)

如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI.
如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI
使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
如果每个项目都要手动完成这些工作，那无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。
那究竟什么是Vue-CLI呢？
CLI（Command Line Interface）.翻译为命令行界面，就是我们所说的脚手架。
Vue CLI是一个官方发布的vue项目脚手架
使用vue-cli可以快速搭建Vue环境和webpack配置

三、Vue CLI使用准备

Node版本

Vue CLI 需要Node.js 8.9 或者更高版本（推荐使用 12.13.0）。你可以使用nvm 或 nvm-window来管理电脑上面的Node版本。

安装Vue CLI脚手架的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确 (4.x)：

vue --version

如果安装比较慢，可以把npm切换成淘宝的源：

npm config set registry https://registry.npm.taobao.org/

四、创建项目(掌握)

初始化项目

vue create xxx

运行以下命令来创建一个新项目：

vue create hello-world

Vue-CLI生成项目流程

vue create 项目名称

选择Manually select features(自己选择项目用的模块), 回车键确认;
选择 Babel CSS Pre-processors (选择项目里面需不需要CSS预处理器), 通过空格选中或者取消选中, 回车键确认;
Pick a CSS pre-processor(选中CSS 预处理器) ,这里选择Less, 回车键确认;
Where do you prefer placing config for ....(babel protcss的配置是要放置到哪里去), 选择 In dedicated config files (独立的文件存放配置就可以),回车确认;
Save this as a preset for future projects?(y/N) 把上面的所有选择单独保存成一个配置,方便以后的项目配置, 这里选择y,下一个选择就是输入这个配置的名字;选择N就不保存,然后回车直接生成一个项目出来.

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。

这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。

对于每一项的功能，此处做个简单描述：

TypeScript 支持使用 TypeScript 书写源码。
Progressive Web App (PWA) Support PWA支持
Router 路由
Vuex 状态管理
CSS Pre-processors 支持 CSS 预处理器。
Linter / Formatter 支持代码风格检查和格式化。
Unit Testing 支持单元测试。
E2E Testing 支持 E2E 测试。

如果你决定手动选择特性，在操作提示的最后你可以选择将已选项保存为一个将来可复用的 preset

~/.vuerc
被保存的 preset 将会存在用户的 home 目录下一个名为 .vuerc 的 JSON 文件里。如果你想要修改被保存的 preset / 选项，可以编辑这个文件。
在项目创建的过程中，你也会被提示选择喜欢的包管理器或使用淘宝 npm 镜像源以更快地安装依赖。这些选择也将会存入 ~/.vuerc。

使用图形化界面

你也可以通过 vue ui 命令以图形化界面创建和管理项目：

vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

项目结构

node_modules
public // 静态资源文件
    |-favicon.ico
    |-index.html
src // 项目源代码，书写代码的地方
    |-assets
    |-App.vue
    |-main.js
.browserslistrc    // 浏览器相关支持情况
.eslintrc.js       // 代码相关支持情况
.gitignore         // Git忽略文件
babel.config.js    // babel配置ES语法 转换
package-lock.json  // npm安装依赖库的具体信息
package.json       // npm依赖库版本信息
postcss.config.js  // css相关转换
README.md          // 项目说明
vue.config.js      // Vue及webpack配置项

vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

这个文件应该导出一个包含了选项的对象：

// vue.config.js
module.exports = {
  // 选项...(例如：)
  lintOnSave: false	// 关闭eslint
}

webpack中添加别名

module.exports = {
    //1.基础的配置方式 
    configureWebpack: {
      resolve: {
        alias: {
          'components': '@/components',
          'pages': '@/pages'
        }
      }
    },

    //2.利用webpack4的webpack-chain来配置 
    chainWebpack: (config) => {
      config.resolve.alias
        .set('@', resolve('src'))
        .set('components', resolve('src/components'))
    }
  }

五、生命周期(掌握)

什么是生命周期：从Vue创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。

1、vue生命周期图示

2、生命周期解读

3、注意点

上一页Part3-指令与传值下一页Part5-《TodoList》项目实战

最后更新于3年前

这有帮助吗？