前端工程化主流解决方案Webpack

黑马程序员Vue全套视频教程,从vue2.0到vue3.0一套全覆盖,前端必会的框架教程_哔哩哔哩_bilibili喜欢的小伙伴们别忘了投币,点赞,收藏呦,历经 5 年的反复打磨与锤炼,黑马程序员重磅推出全套最新的 Vue2 + Vue3 基础课程。共计 500 多集的免费视频,助您轻松掌握前端圈最火的 Vue 框架!https://www.bilibili.com/video/BV1zq4y1p7ga?p=261&spm_id_from=333.1007.top_right_bar_window_history.content.click

前端开发的四个现代化:

  • 模块化:js的模块化、css的模块化、其他资源的模块化
  • 组件化:复用现有的UI结构、样式、行为
  • 规范化:目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理
  • 自动化:自动化构建、自动部署、自动化测试

一. Webpack的基本使用

Webpack是前端项目工程化的具体解决方案,可以帮我们解决一些JavaScript在浏览器的兼容性问题。

首先需要再项目的根目录文件夹中创建一个名为 src 文件夹,之后,我们的代码都在这个文件夹的文件中编写。

1. 在项目中安装和配置webpack

npm i webpack@5.5.1 webpack-cli@4.2.0 -D

(1)在项目根目录中,创建名为webpack.config.js的webpack配置文件,并初始化下方的基本配置:

module.exports={
    mode:'development'  //mode用来指定构建模式,可选值有development和production
}

 mode节点的可选值:

  • development:开发环境,打包速度快,不会进行代码压缩和性能优化
  • production:生产环境,打包速度慢,会进行代码压缩和性能优化

(2)在packge.json的scripts节点下,新增dev脚本如下。script节点下的脚本,可以通过通过npm run 的方式执行,如npm run dev。

"scripts": {
    "dev":"webpack"
 }

(3)在终端中运行npm run dev命令,启动 webpack 进行项目的打包构建。

(每次修改完代码要看效果的时候都需要重新打包,非常麻烦,解决该问题需要用到webpack中的插件webpack-dev-server,具体步骤见下文)

npm run dev

(4)打包构建成功后,webpack帮我们自动生成了一个dist文件夹,其中有main.js文件,是转换完成后没有兼容性问题的.js文件。因此,在html文件中应导入main.js文件。

Webpack的默认约定:

  • 默认的打包入口文件为 src  ->  index.js
  • 默认的输出文件路径为 dist  -> main.js
  • 注意:可以在webpack.config.js中修改打包的默认约定
const path=require('path')  //导入node.js中专门存放操作路径的模块

module.exports={
    mode : 'development',
    entry : path.join(__dirname,'./src/index.js'), //指定打包的入口
    output : { //指定打包的出口
        path : path.join(__dirname,'./dist'), //输出文件的存放路径
        filename : 'bundle.js' //输出文件的名称
    }  
}

2. 在项目中安装和配置webpack-dev-server

webpack每次修改完代码要看效果的时候都需要重新打包,非常麻烦,解决该问题需要用到webpack中的插件webpack-dev-server。

npm install webpack-dev-server@3.11.0 -D
npm install webpack-cli
# 报错TypeError: Class constructor ServeCommand cannot be invoked without 'new'
# 所以我又下载了一次webpack-cli

(1)修改package.json的scripts节点中的dev命令如下:

"scripts": {
    "dev": "webpack serve" 
}

(2)再次运行npm run dev命令,重新进行项目的打包

(3)在浏览器中访问http://localhost:8080地址,查看自动打包效果(注意:因为webpack-dev-server会启动一个实时打包的http服务器)

(4)webpack-dev-server打包生成的文件,存放到了内存中,这样提高了实时打包的输出性能。webpack-dev-server生成到内存中的文件,默认放到了项目的根目录中,是虚拟、不可见的。因此,在html文件中直接导入根目录下的打包文件即可。

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

3. 在项目中安装和配置html-webpack-plugin插件

html-webpack-plugin是webpack中的HTML插件,可通过该插件自定制index.html页面的内容。

npm install html-webpack-plugin@4.5.0 -D

在webpack.config.js文件中进行配置:

需求:通过html-webpack-plugin插件,将src目录下的index.html页面,复制到项目根目录一份。

//1、导入HTML插件,得到一个构造函数
const HtmlPlugin=require('html-webpack-plugin')

//2、创建HTML插件的实例对象
const htmlPlugin=new HtmlPlugin({
    template:'./src/index.html', //指定原文件的存放路径
    filename:'./index.html' //指定生成的文件存放路径
})

module.exports={
    mode : 'development',
    plugins:[htmlPlugin], //3、通过plugins节点使htmlPlugin插件生效
}

注意:(1)通过HTML插件复制到项目根目录中的index.html页面也被存放到了内存中。(2)HTML插件在生成的index.html页面的底部,自动注入了打包的bundle.js文件。

4. 对webpack的更多配置

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

module.exports={
    mode : 'development',
    devServer : {
        open : true, //初次打包完成后,自动打开浏览器
        host : '127.0.0.1', //实时打包所使用的主机地址
        port : 80,  //实时打包所使用的的端口号
    }
}

二. Webpack中的loader加载器

webpack默认只能打包处理.js后缀名结尾的模块,要解决此问题需要调用loader加载器协助webpack打包处理特定的文件模块。

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

1. 打包和处理css文件

npm i style-loader@2.0.0 css-loader@5.0.1 -D

在webpack.config.js文件中进行配置,在module->rules数组中,添加loader规则:

module.exports={
    mode : 'development',
    module:{     //所有第三方文件模块的匹配规则
        rules:[  //文件后缀名的匹配规则,test表示匹配文件类型,use表示要调用的loader
            {test:/\.css$/,use:['style-loader','css-loader']}
        ]
    }
}

注意:(1)use数据中指定的loader顺序是固定的,(2)多个loader的调用顺序是从后往前调。

2. 打包和处理less文件

npm i less-loader@7.1.0 less@3.12.2 -D

在webpack.config.js文件中进行配置,在module->rules数组中,添加loader规则:

module.exports={
    mode : 'development',
    module:{     //所有第三方文件模块的匹配规则
        rules:[  //文件后缀名的匹配规则,test表示匹配文件类型,use表示要调用的loader
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']}
        ]
    }
}

3. 打包和处理样式表中与url有关的路径

npm i url-loader@4.1.1 file-loader@6.2.0 -D

在webpack.config.js文件中进行配置,在module->rules数组中,添加loader规则:

module.exports={
    mode : 'development',
    module:{     
        rules:[  
            //?之后是loader的参数项,limit用来指定图片大小,单位是字节(byte)
            //只有<=limit大小的图片,才会被转成base64格式的图片    
            {test:/\.jpg|png|gif$/,use:'url-loader?limit=22229'}
        ]
    }
}

loader的另一种配置方式:

module.exports={
    mode : 'development',
    module:{     
        rules:[    
            {test:/\.jpg|png|gif$/,use:{
                loader:'url-loader',
                options:{
                    limit:22228
                },
            }}
        ]
    }
}

4. 打包和处理js文件中的高级语法

npm i babel-loader@8.2.1 @babel/core@7.12.3 @babel/plugin-proposal-class-properties@7.12.1 -D

在webpack.config.js文件中进行配置,在module->rules数组中,添加loader规则:

module.exports={
    mode : 'development',
    module:{     
        rules:[    
            {
            test:/\.js$/,
            exclude:/node_modules/,
            use:{
                loader:'babel-loader',
                options:{
                    //声明一个babel插件,此插件用来转化class中的高级语法
                    plugins:['@babel/plugin-proposal-class-properties'],
                },
            }}
        ]
    }
}

注意:exclude为排除项,表示babel-loader只需要处理开发者编写的js文件,不处理node_modules下的js文件。


三. 打包发布

开发环境下,打包生产的文件存放于内存中,无法获取到最终打包生产的文件,而且打包生产的文件不会进行代码压缩和性能优化。因此,要使用webpack对项目进行打包发布。

1. 配置wenpack的打包发布

(1)在package.json文件的scripts节点下,新增build命令:

  "scripts": {
    "dev": "webpack serve",
    "build":"webpack --mode production"
  }

注意1:开发环境中运行dev命令,项目发布时运行build命令!

注意2:--mode是一个参数项,用来指定webpack的运行模式,该参数项会覆盖webpack.config.js中的mode选项。

(2)把JavaScript文件统一生成到js目录中,在webpack.config.js配置文件的output节点中进行配置。把图片文件统一生成到image目录中,要在webpack.config.js中的url-loader配置项中新增outputPath选项,指定图片文件的输出路径。

module.exports={
    mode : 'development',
    module:{     
        rules:[    
            {
                test:/\.jpg|png|gif$/,
                use:{
                    loader:'url-loader',
                    options:{
                        limit:22228,
                        outputPath:'image'
                    },
                }   
            }
        ]
    },
    output:{
        path:path.join(__dirname,'dist'),
        filename:'js/bundle.js'
    },
    //省略其他配置项...
}

(3)在终端中运行以下命令完成打包发布,生成dist文件夹,里面是项目发布生成的文件。

npm run build

2. 安装并配置clean-webpack-plugin插件

为了自动清理dist目录下的旧文件,要安装并配置clean-webpack-plugin插件

npm install clean-webpack-plugin@3.0.0 -D

在webpack.config.js文件中进行配置: 

//1、按需导入插件,得到插件的构造函数之后,创建插件的实例对象
const {CleanWebpackPlugin}=require('clean-webpack-plugin')
const cleanPlugin=new CleanWebpackPlugin()
//2、把创建的cleanPlugin插件实例对象,挂载到plugins节点中
module.exports={
    mode : 'development',
    plugins:[cleanPlugin], 
    //省略其他配置项...
}

四. Source Map

前端项目在投入生产环境之前都需要对JavaScript源代码进行压缩混淆,从而减小文件体积,提高文件加载效率,此时对压缩混淆之后的代码除错(debug)是一件极其困难的事。

Source Map是一个信息文件,里面存储着位置信息,即存储着代码压缩混淆前后的对应关系。有了它,出错时除错工具直接显示原始代码,而不是转换后的代码。

1. 开发环境

开发环境下,推荐在webpack.config.js中添加如下配置,以保证运行时报错的行数与源代码行数保持一致:

module.exports={
    mode : 'development',
    devtool : 'eval-source-map',
    //省略其他配置项...
}

注意:eval-source-map仅限在开发模式下使用,不建议在生产模式下使用!

2. 生产环境

(1)在生产环境下,如果省略了devtool选项,最终生成的文件中不包含Source Map,可以防止原始代码泄露。

(2)在生产环境下,如果只想定位报错的具体行数,且不想暴露源码,可以将devtool的值设置为nosources-source-map。

module.exports={
    mode : 'development',
    devtool : 'nosources-source-map',
    //省略其他配置项...
}

小结:实际开发中不需要自己配置webpack,可以直接使用  命令行工具(CLI)一键生成带有webpack的项目!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值