vue.js学习笔记二十三——webpack中的基本使用

最新推荐文章于 2023-08-25 00:20:11 发布

武汉小喽啰

最新推荐文章于 2023-08-25 00:20:11 发布

阅读量176

点赞数

分类专栏： # vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43318134/article/details/97620801

版权

vue 专栏收录该内容

46 篇文章 8 订阅

订阅专栏

1. 简单的webpack

省略了webpack环境的安装(全局安装即可)

1.1 创建目录结构

webpack_study

|-- src

|-- index.html

|-- main.js

|-- dist (目标目录，可有可无，打包的时候，如果没有该目录会自动创建)

1.2 在项目目录下运行命令

npm init -y

然后项目根目录会出现package.json文件，里面是一些重要的配置信息

注意：如果我们的项目的根目录名称（webpack_study）是中文或者包含中文的话，就不能用-y命令，这时候，直接用npm int在按回车键，在手动输入包的名字

1.3 写一个最简单的index.html与main.js

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>
		
	</body>
</html>

main.js

alert("xxx");

1.4 打包项目

输入命令：webpack ./src/man.js ./dist/bundle.js

回车打包，会在dist目录下生成bundle.js文件

注意：

1. 如果webpack版本为4.0以上的，就用命令：webpack .\src\main.js -o .\dist\bundle.js

2. 查看webpack版本：webpack -v

3. 打包成功之后如图：

3.1 各个参数的值

其中的一些参数值:

Version:webpack版本

time:这次打包所花费的时间

列表信息

Asset:打包这次生成的文件

Size:这次生成文件的大小

Chunks:这次打包的分块

chunk Names:这次打包的名称

3.2. 观察打包之后的信息，发现下方有黄色的警告信息，这是为什么了？

这是因为webpack 4 引入了模式,有开发模式,生产模式,无这三个状态，黄色部分的警告的意思是,没有设置模式

4. 设置模式：在webpack.json中script中添加dev与build

"scripts": {
    "dev": "webpack –mode deveplopment",
    "build": "webpack –mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

5. 执行正确的命令：npx webpack .\src\main.js -o .\dist\bundle.js --mode development

6. 了解两种模式：

6.1 npm run dev (开发环境输出的demo.js没有压缩),也就是这个形式的,如下图,这是平时我们写代码的形式

6.2 npm run build (生产模式输出的demo.js压缩过)

1.5 在index.html引入bundle.js文件

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

1.6 运行index.html

直接打开页面就可以看到效果

2. 添加自动打包

项目每次修改之后，都需要重新打包，很麻烦，这里安装自动打包工具

2.1 安装工具

npm i webpack-dev-server -D

安装完成之后，需要在根目录下建立webpack.config.js文件

2.2 写配置文件webpack.config.js

因为webpack是基于node进行构建的，所以，webpack的配置文件中，任何合法的node代码都是支持的。

// 1. 引入路径对象
var path = require('path'); 

/**
 * 2. 向外暴露配置对象
 *    当以命令行形式运行webpack或者webpack-dev-server的时候，工具会发现我们并没有提供要打包的文件和入口和出口
 * 文件，此时，他会检查项目根目录中的配置文件，并读取这个文件，就可以拿到导出的这个配置对象，然后根据这个配置
 * 对象进行打包构建
 * 2.1 通过entry指定入口文件，后面跟路径
 * 2.2 通过output指定输出文件，为一个对象，对象包含两个属性
 * 2.2.1 path：输出文件路径
 * 2.2.2 filename：输出文件名称
*/
module.exports = {
    entry:path.join(__dirname,"./src/main.js"),  // 指定入口文件
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    }
}

2.3 运行命令

webpack

或者

webpack --mode development

2.4 添加实时打包脚本

经过上面的设置，我们发现，并不能实现实时打包的功能，原因是我们还需要在package.json文件中的script中添加自动打包命令脚本。

"dev":"webpack-dev-server --open --port 3000 --contentBase src --hot",

参数详解：

1. --open：自动打开浏览器

2. --port 3000：端口号是3000

3. --contentBase src：默认打开src目录

4. --hot：实现热更新

2.5 启动项目

运行命令：npm run dev

自动在浏览器中打开页面，发现是一个空白页面，并且用开发者模式发现，有错误。报bundle.js找不到404的错误，仔细看错误信息，发现bundle.js位于dist目录下即/dist/bundle.js，但是我们使用的工具webpack-dev-server帮我们托管的资源目录是根目录，以根目录访问，所以404错误。

两种解决方式：

方式一：直接在index.html中引入bundle.js的路径为根目录

方式二：不在index.html中引入bundle.js，用webpack-plugin插件来实现，插件会自动帮我们江bundle.js安装在index.html底部。

2.6 html-webpack-plugin插件

1.安装插件

运行命令：npm i html-webpack-plugin -S

2. 安装完成之后，打开webpack.confg.js文件并配置插件

删除index.html中引入的bundle.js

// 1. 引入路径对象
var path = require('path'); 

// 3. 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部
//    如果要配置插件，需要在导出的对象中，挂载一个plugins节点
var htmlWebpackPlugin = require('html-webpack-plugin');

/**
 * 2. 向外暴露配置对象
 *    当以命令行形式运行webpack或者webpack-dev-server的时候，工具会发现我们并没有提供要打包的文件和入口和出口
 * 文件，此时，他会检查项目根目录中的配置文件，并读取这个文件，就可以拿到导出的这个配置对象，然后根据这个配置
 * 对象进行打包构建
 * 2.1 通过entry指定入口文件，后面跟路径
 * 2.2 通过output指定输出文件，为一个对象，对象包含两个属性
 * 2.2.1 path：输出文件路径
 * 2.2.2 filename：输出文件名称
*/
module.exports = {
    entry:path.join(__dirname,"./src/main.js"),  // 指定入口文件
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    // 挂载插件节点,所有webpack插件的配置节点
    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),    // 指定模板文件的路径
            filename:'index.html' // 设置生成的内存页面的名称
        })
    ]
}

3. 运行

命令：npm run dev

页面正确执行

3. 加载样式文件

在src目录下新建一个index.css文件

html, body {
    margin: 0;
    padding: 0;
    background-color: cyan;
}

在main.js中引入index.css

import './css/index.css'

发现会报错。所以我们需要引入样式loader。

3.1 引入css样式文件

3.1.1 安装css加载器

npm i style-loader css-loader -D

3.1.2 添加配置节点

在webpack.confg.js文件中，与plugins平级的地方加一个module节点

 // 配置所有第三方loader模块的节点
    module:{
        // rules 匹配规则
        rules:[
            /* 
                配置处理css文件的loader
                配置解释：第一个属性叫做test，是一个正则表达式，表示文件以.css结尾
                         第二个属性表示，这种文件用什么来处理，用use表示，由于我们装了2个
                         loader，所以需要写两个loader，用数组表示
            */
            { test:/\.css$/,use:['style-loader','css-loader'] }
        ]
    }

3.1.3 运行

npm run dev

页面正常显示

3.2 引入less样式文件

3.2.1 安装less加载器

npm i less-loader less -D

3.2.2 添加配置节点

/* 
                配置处理less文件的loader
                配置解释：第一个属性叫做test，是一个正则表达式，表示文件以.css结尾
                         第二个属性表示，这种文件用什么来处理，用use表示，因为less
                         样式底层实现还是css样式，所以，需要引入css加载器
            */
           { test:/\.less$/,use:['style-loader','css-loader','less-loader'] }

3.3 引入sass样式文件

3.3.1 安装sass加载器

npm i sass-loader node-sass -D

3.3.2 添加配置节点

// 处理sass文件的loader
{ test:/\.scss$/,use:['style-loader','css-loader','sass-loader'] }

讲在最后，在实际开发中，我们用的最多的是css加载器，另外两种只做了解。