网络知识 娱乐 Vue2.0-webpack

Vue2.0-webpack

发布: 2023年2月14日 10:17:50

目录

1. webpack的基本使用

1）创建列表隔行变色项目

2）在项目中安装webpack

3）在项目中配置webpack

2. webpack相关问题

1） mode可选值的应用场景

2）webpack.config.js文件的作用

3）webpack中的默认约定

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

3. webpack中的插件

1）webpack-dev-server插件

2）html-webpack-plugin插件

3）devServer节点

4. webpack中的loader

1）loader概述

2）loader的调用过程

3）打包处理css文件

4）打包处理less文件

5）打包处理样式表中与url路径相关的文件

6）打包处理js文件中的高级语法

5. 打包发布

1）配置webpack的打包发布

2）把JavaScript文件统一生成到js目录中

​

3）把图片文件统一生成到image目录中

4）自动清理dist目录下的旧文件

5）

6. Source Map

1）默认Source Map的问题

2）webpack生产环境下的Source Map

3）只定位函数不暴露源码

5）Source Map的最佳使用

1. webpack的基本使用

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

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

好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

1）创建列表隔行变色项目

 

 

 

2）在项目中安装webpack

-S：--save的简写，保存到"dependencies"，开发阶段和部署阶段都要用到的包

-D：--save-dev的简写，保存到"devDependencies"，只在开发阶段利用

 

 

3）在项目中配置webpack

  1. 在项目根目录中，创建名为webpack.config.js的webpack配置文件，并初始化如下的基本配置：
  2. 在package.json的scripts节点下，新增dev脚本如下：
  3. 在终端中运行npm run dev命令，启动webpack进行项目的打包构建

2. webpack相关问题

1） mode可选值的应用场景

 

2）webpack.config.js文件的作用

webpack.config.js文件是webpack的配置文件。webpack在真正开始打包构建之前，会先读取这个配置文件，从而给予给定的配置，对项目进行打包。

由于webpack是基于node.js开发出来的打包工具，因此在它的配置文件中，支持使用node.js相关的语法和模块进行webpack的个性化配置。

3）webpack中的默认约定

在webpack 4.x和5.x的版本中，有如下的默认约定：

  • 默认的打包入口文件为src -> index.js
  • 默认的输出文件路径为dist -> main.js

注意：可以在webpack.config.js中修改打包的默认约定

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

在webpack.config.js配置文件中，通过entry节点指定打包的入口，通过output节点指定打包的出口。

const path = require('path')
//使用 Node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {
    //代表webpack运行的模式，可选值：development、production
    //development：时间短、体积大，开发时候使用，因为追求的是打包速度而不是体积
    //production：时间长、体积小，上线的时候使用，追求体积小而不是速度快
    mode: 'development',
    //entry：指定要处理哪个文件，自行明明src目录下的文件名
    entry: path.join(__dirname, './src/index1.js'),
    //指定生成的文件要存放到哪里
    output: {
        // 存放到目录
        path: path.join(__dirname, 'dist'),
        // 生成的文件名
        filename: 'bundle.js'
    }
}

 

3. webpack中的插件

1）webpack-dev-server插件

每当修改了源代码，webpack会自动进行项目的打包和构建。会启动一个实时打包的http服务器。

  1. 运行：npm install web-dev-server@3.11.2 -D
  2. 修改package.json -> script中的dev命令
  3. 再次运行npm run dev命令，重新进行项目的打包
  4. 在浏览器中访问http://loacalhost:8080地址，查看自动打包效果

 

 只要index1.js发生改变，就会实时地改变数据。

  

2）html-webpack-plugin插件

  1. 安装：npm install html-webpack-plugin@5.3.2 -D
  2. 配置：
  3.  再次运行npm run dev命令 

 

  •  通过HTML插件复制到项目根目录中的index.html页面，也被放到了内存中
  • HTML插件在生成的index.html页面，自动注入的打包的bundle.js文件

3）devServer节点

在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多的配置。

    devServer: {
        //首次打包成功后，自动打开浏览器
        open: true,
        //在http协议中，如果端口号是80，则可以被 省略
        port: 80,
        //指定运行的主机地址
        host: '127.0.0.1'
    }

4. webpack中的loader

1）loader概述

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

loader加载器的作用：协助webpack打包处理特定的文件模块。

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

2）loader的调用过程

index.js模块

//1.使用ES6导入语法，导入jquery
import $ from 'jquery'

//1.导入图片，得到图片文件
import logo from './images/logo.jpg'

//2.给img标签的qrc动态赋值
$('.box').attr('src', logo);


//导入样式，在webpack中都可以通过ES6语法进行导入和使用
import '../css/index.css'
import '../css/index.less'

//2.定义jQuery的入口函数
$(function() {
    //3.实现
    $("li:odd").css("background-color","pink");
    $("li:even").css("background-color","skyblue");
})

3）打包处理css文件

  1. 运行 npm i style-loader@3.0.0 css-loader@5.2.6 -D 命令，安装处理css文件的loader
  2. 在webpack.config.js的module -> rules数组中，添加loader规则： 
        module: {
        //定义了不同模块对应的loader
        rules:[
            // test：匹配的文件类型，use：要调用的loader
            {test: /.css$/,use:['style-loader', 'css-loader']}
        ]
    }
  • use数组中指定的loader顺序是固定的
  • 多个loader的调用顺序是：从后往前调用

4）打包处理less文件

  1. 运行npm i less-loader@10.0.1 less@4.1.1 -D命令
  2. 在webpack.config.js的module -> rules数组中，添加loader规则： 
     module: {
        //定义了不同模块对应的loader
        rules:[
            // test：匹配的文件类型，use：要调用的loader
            {test: /.css$/,use:['style-loader', 'css-loader']},
            //处理.less文件的loader
            {test: /.less$/,use:['style-loader', 'css-loader','less-loader']}
        ]
    }

5）打包处理样式表中与url路径相关的文件

  1. 运行npm i url-loader@4.1.1 file-loader@6.2.0 -D命令
  2. 在webpack.config.js的module -> rules数组中，添加loader规则： 
        module: {
        //定义了不同模块对应的loader
        rules:[
            // test：匹配的文件类型，use：要调用的loader
            {test: /.css$/,use:['style-loader', 'css-loader']},
            //处理.less文件的loader
            {test: /.less$/,use:['style-loader', 'css-loader','less-loader']},
            //处理图片文件的loader
            {test: /.jpg|png|gif$/,use:'url-loader?limit=22229'}
        ]
    }

？之后的是loader的参数项：

  • limit用来指定图片的大小，单位是字节（byte）
  • 只有<=limit大小的图片，才会被转为base64格式的图片

6）打包处理js文件中的高级语法

webpack只能打包处理一部分高级的javaScript语法，对于那些webpack无法处理的高级js语法，需要借助于babel-loader进行打包处理。 例如 webpack 无法处理下面的 JavaScript 代码：

//1. 定义名为info的装饰器
function info(target) {
    //2.为目标添加静态属性info
    target.info = 'Person info';
}
//3.为Person类应用info装饰器
@info
class Person {}
//4.打印Person的静态属性info
console.log(Person.info);
  1. 运行npm i label-loader@8.2.2  @label/core@7.14.6 @label/plugin-proposal- decorators@7.14.5 -D命令
  2. 在webpack.config.js的module -> rules数组中，添加loader规则： 
        module: {
        //定义了不同模块对应的loader
        rules:[
            // test：匹配的文件类型，use：要调用的loader
            {test: /.css$/,use:['style-loader', 'css-loader']},
            //处理.less文件的loader
            {test: /.less$/,use:['style-loader', 'css-loader','less-loader']},
            //处理图片文件的loader
            //如果需要调用的loader只有一个，则只传递一个字符串也可以；如果有多个字符串，则必须指定数组
            {test: /.jpg|png|gif$/,use:'url-loader?limit=22229'},
            //必须使用exclude指定排除项，因为node_modules目录下的第三方包不需要被打包
            {test: /.js$/,use:'babel-loader', exclude: /node_modules/ }
        ]
    }
  3. 在项目根目录下，创建名为babel.config.js的配置文件，定义Babel的配置项如下： 
    module.exports = {
    //声明babel可用的插件
    //webpack在调用babel-loader的时候，会先加载plugins的插件来使用
    plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
}

     

5. 打包发布

1）配置webpack的打包发布

在package.json文件的scripts节点下，新增bulid命令如下：

  "scripts": {
    //开发环境中，运行dev命令，内存
    "dev": "webpack serve",
    //项目发布时，运行build命令，物理磁盘
    "build": "webpack --mode production"
  }

--mode是一个参数项，用来指定webpack的运行模式。production代表生产环境，会对打包生成的文件进行代码压缩和性能优化。

注意：通过--mode指定的参数项，会覆盖webpack.config.js中的model选项。

2）把JavaScript文件统一生成到js目录中

在webpack.config.js配置文件的output节点中，进行如下的配置：

    //指定生成的文件要存放到哪里
    output: {
        // 存放到目录
        path: path.join(__dirname, 'dist'),
        // 生成的文件名
        //告诉webpack把生成的bundle.js放到dist下的js目录下
        filename: 'js/bundle.js'
    }

 

3）把图片文件统一生成到image目录中

修改webpack.config.js中的url-loader配置项，新增outputPath选项即可指定图片文件的输出路径：

    module: {
        //定义了不同模块对应的loader
        rules:[
            //在配置url- loader的时候，多个参数之间使用 & 进行分隔开
            {test: /.jpg|png|gif$/,use:'url-loader?limit=22229&outputPath=images'}
        ]
    }

4）自动清理dist目录下的旧文件

为了在每次打包发布时自动清理掉dist目录下的旧文件，可以安装并配置clean-webpack-plugin插件：

  1. 运行 npm install --save-dev clean-webpack-plugin的命令
  2. webpack.config.js配置： 
        //左侧的{}是结构赋值
    const { CleanWebpackPlugin } = require('clean-webpack-plugin');    
    module.exports = {
        plugins: [new CleanWebpackPlugin()]
    }

5）

6. Source Map

Source Map是一个信息文件，里面存储着位置信息。也就是说，Source Map文件中存储着压缩混淆后的代码所对应的转换前的位置。有了Source Map，出错的时候除错工具将会直接显示原始代码，而不是转换后的代码，能够极大地方便后期的调试。

1）默认Source Map的问题

开发环境下默认生成的Source Map，记录的是生成后的代码的位置，会导致运行时报错的行数与源代码的行数不一致的问题：

 

 

开发环境下，在webpack.coonfig.js中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致：

module.exports = {
    //代表webpack运行的模式，可选值：development、production
    //development：时间短、体积大，开发时候使用，因为追求的是打包速度而不是体积
    //production：时间长、体积小，上线的时候使用，追求体积小而不是速度快
    mode: 'development',
    //eval-source-map仅限在开发模式下使用，不建议在生产模式下使用
    //此选项生成的Source Map能够保证运行时报错的行数与源代码的行数保持一致
    devtool: 'eval-source-map'
}

 

 

2）webpack生产环境下的Source Map

在生产环境下，如果省略了devtool选项，则最终生成的文件中不包含Source Map，能够防止原始代码通过Source Map的形式暴露给别人。

 

3）只定位函数不暴露源码

在生产环境下，如果只想定位报错的具体行数，且不想暴露源码，此时可以将devtool的值设置为nosources-source-map。实际效果如图：

 

module.exports = {
    //代表webpack运行的模式，可选值：development、production
    //development：时间短、体积大，开发时候使用，因为追求的是打包速度而不是体积
    //production：时间长、体积小，上线的时候使用，追求体积小而不是速度快
    mode: 'development',
    //eval-source-map仅限在开发模式下使用，不建议在生产模式下使用
    //此选项生成的Source Map能够保证运行时报错的行数与源代码的行数保持一致
    // devtool: 'eval-source-map',
    devtool: 'nosources-source-map'
}

5）Source Map的最佳使用

开发环境下：

  • 把devtool的值设置为eval-source-map
  • 好处：可以精准定位到具体的错误位置行数

生产环境下：

  • 把devtool的值设置为nosources-source-map
  • 好处：防止源码泄漏，提高网站的安全性

相关文章