前端工程化 Webpack基础

最新推荐文章于 2024-12-19 13:59:54 发布

清晨细雨霏

最新推荐文章于 2024-12-19 13:59:54 发布

阅读量995

点赞数

文章标签：前端 webpack

本文链接：https://blog.csdn.net/weixin_34929433/article/details/123824766

版权

本文介绍了前端工程化的概念，重点讲解了Webpack的安装、配置，包括mode模式、出入口文件、loader加载器的使用，如处理样式文件、URL路径相关文件和JS高级语法。此外，还涉及webpack-dev-server、插件如html-webpack-plugin和clean-webpack-plugin的使用，以及SourceMap在开发和生产环境的应用。最后，给出了打包发布和配置建议。

摘要由CSDN通过智能技术生成

前端工程化

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

webpack

前端项目工程化的具体解决方案
提供友好的前端模块化开发支持，以及代码压缩混淆、处理js兼容性、性能优化等强大功能

安装

初始化项目
npm init -y
安装
npm install webpack webpack-cli --save-dev
根目录创建webpack配置文件 webpack.config.js

// webpack.config.js
module.exports = {
   
    ...
}

webpack.config.js 配置

1.mode模式

development
- 开发环境
- 不会对打包生成的文件进行代码压缩和性能优化
- 打包速度快
production
- 生产环境
- 会对打包生成的文件进行代码压缩和性能优化
- 打包速度慢

module.exports = {
   
    mode: 'development'
}

2.出入口文件

entry 打包文件入口，默认为：src/index.js
output 打包文件输出，默认为： dist/main.js

const path = require('path')
module.exports = {
   
    entry: path.join(__dirname, './src/index.js'),   // 入口文件
    output: {
   
        path: path.join(__dirname, './dist'),        // 输出目录
        filename: 'bundle.js'                        // 输出文件
    }
}

3.loader加载器

webpack文件加载器，webpack默认只能打包处理.js文件，其他非.js后缀文件需要loader加载器处理完成后才能进行打包

3-1. less, css等样式文件处理

依赖安装 npm install style-loader css-loader less-loader --save-dev
rules配置添加规则: test表示匹配文件类型，use表示要调用的loader，调用顺序为从后往前

module.exports = {
   
    rules: [
        {
    test

最低0.47元/天解锁文章