5.0 Vue基础入门

webpack的基本使用

1，什么是webpack？

概念：webpack是前端项目工程化的具体解决方案。

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆，处理浏览器端JavaScript的兼容性，性能优化等强大的功能。

好处：让程序员吧工作的中心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。
注意：目前Vue，React等前端项目，基本上都是基于webpack进行工程化开发的。

2，安装webpack

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

3，在项目中配置webpack

① 在项目根目录中，创建名为 webpack.config.js的webpack配置文件，并初始化如下的基本配置：

// 使用Node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {
  //mode 用来指定构建模式，可选值有 development 和 production
  // 开发时使用 development 打包速度快，体积大
  // 上线的时候使用 production 打包速度快， 体积小
  mode: 'development',
};
1
2
3
4
5
6
7

② 在package.json的script节点下，新增 dev 脚本如下：

  "scripts": {
    "dev": "webpack"
  }
1
2
3

③ 在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建

运行之后会在项目中自动生成一个dist文件，我们后续只需要导入dist文件下的main.js文件即可

4，自定义打包的入口与出口

在webpack.config.js配置文件中，通过entry节点指定打包的入口。通过output节点指定打包的出口。
示例代码如下：

const path = require('path');
// 使用Node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {
  //mode 用来指定构建模式，可选值有 development 和 production
  mode: 'development',
  // entry:'指定要处理那个文件'
  entry: path.join(__dirname, './src/index.js'),
  // output 指定生成的文件存放在哪里
  output: {
    // 存放目录
    path: path.join(__dirname, 'dist'),
    // 生成的文件名
    filename: 'main.js',
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

webpack中的插件

1，webpack插件的作用

常用插件：

1. webpack-dev-server
   - 类似于 node.js 的nodemon工具
   - 每当修改了源代码，webpack会自动进行项目的打包和构建
2. html-webpack-plugin
   - webpack中的HTML插件 (类似于一共模板引擎插件)
   - 可以通过此插件自定制 index.html 页面的内容

2，安装配置 webpack-dev-server

安装：
运行命令安装插件：npm install webpack-dev-server -D
webpack 4 以上我们还需要安装webpack-cli
npm install webpack-cli -D

配置：
① 新增 webpack.config.js 中的 devServer命令：

 // 监听文件改动，自动打包    //  watch: true,
    devServer: {
        static: path.join(__dirname, './'), // 指定发布后的映射的路径，./代表映射当前路劲
        compress: true, // 压缩资源
        port: 9000, // 指定服务器的端口号
        open: 'Chrome', // 指定以哪个浏览器打开，open:true 代表以默认浏览器打开
    }
1
2
3
4
5
6
7

webpack版本4以上的在package.json内配置如下

  "scripts": {
    "dev": "webpack",
    "dev-serve": "webpack serve"
  }
1
2
3
4

② 再次运行 npm run dev 命令，重新进行项目的打包

③ 在浏览器中访问 http://localhost:8080 地址查看自动打包效果
修改引入文件

***注意：webpack-dev-server 会启动一个实时打包的http服务器

3，安装 html-webpack-plugin
安装：
npm install html-webpack-plugin -D
配置：
① webpack.config.js文件中新增配置如下代码

const HtmlPlugin = require('html-webpack-plugin');// 导入  html-webpack-plugin 插件，得到插件的构造函数
// nwe 构造函数，创建插件的示例对象
const htmlPlugin = new HtmlPlugin({
  template: './src/index.html', //指定要复制那个页面
  filename: './index.html', //指定复制出来的文件名和存放路径
});
1
2
3
4
5
6

② webpack.config.js文件module.exports中新增

module.exports = {
  // 插件的数组，将来webpack在运行时，会被加载并调用这些插件
  plugins: [htmlPlugin],
}
1
2
3
4

webpack 中的loader插件

在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块,webpack 默认处理不了，需要调用loader 加载器才可以正常打包，否则会报错!
loader加载器的作用:协助webpack 打包处理特定的文件模块。比如:

• css-loader 可以打包处理.css相关的文件
• less-loader可以打包处理.less相关的文件
• babel-loader可以打包处理webpack无法处理的高级JS语法