Webpack的一些配置

最新推荐文章于 2024-09-05 14:26:45 发布
最新推荐文章于 2024-09-05 14:26:45 发布
阅读量149 收藏
点赞数
文章标签： webpack配置 webpack.config.js 入口出口 css抽离 优雅降级等
原文链接：https://blog.csdn.net/congboer/article/details/94215791
版权

Webpack

一、市面上有哪些类似于Webpack的前端工程化工具【 自动化工具 】

  1. grunt
  2. gulp ( 现在已经4.x版本了 )
  3. Browserify ( Webpack 前身，只能处理js )
  4. Webpack 【 主流行 】
  5. rollup.js https://www.rollupjs.com/guide/zh 【 小众 】
  6. parcel 【 小众 】
  7. FIS https://fis.baidu.com/ 【 小众 】

二、前端工程化工具的发展历程

  1. grunt
  2. gulp ( 4.x ) 流的操作 .pipe()
  3. Browserify ( Webpack 前身 ) 没有兼容模块化问题（ es6 ）
  4. Webpack 【 主流行 】 自动解决模块依赖性问题

三、 Webpack版本的发展过程

​ 官网: https://webpack.js.org/

​ 中文: https://www.webpackjs.com/

webpack1

​ 支持CMD和AMD，同时拥有丰富的plugin和loader，webpack逐渐得到广泛应用。

webpack2

​ 支持ES Module，分析ESModule之间的依赖关系，

​ webpack1必须将ES，Module转换成CommonJS模块，2支持tree sharking

webpack3

​ 新的特性大都围绕ES Module提出，如Scope Hoisting和Magic Comment(注释语法)；

​ webpack3以上基本上都可以解决es6提出的模块化

webpack4

​ 可以解决es6模块化【 export default / export import 】

​ 更多个功能性 pulgin【 插件 】 和 loader 【 转换器 】

​ 前端框架中广泛使用： Angular Vue React 的脚手架都是由webpack来进行开发、管理

四、 Webpack涉及到的前端环境问题

  1. Webpack底层是由 Node.js 来开发的，也就是说Webpack的配置文件都是 Node.js 文件

  2. Webpack的模块化书写的规范是Common.js规范

  3. 环境支持： Node.js 8+

  4. 前端环境： 【 重点 】

    • 开发环境 - 无法直接在服务器中去运行
    • 生产环境 - 将开发环境下的代码经过 打包 压缩 编译 之后的文件
    • 测试环境 - 将开发环境的代码经过 打包 压缩 编译 之后的文件，放在测试环境服务器中运行
      • unit test 单元测试 【 mocha Jest 】
      • e2e 端到端测试
    • 预上线环境： 将开发环境的代码经过 打包 压缩 编译 之后的文件，放到一个局域网中去运行
    • 上线环境：将开发环境的代码经过 打包 压缩 编译 之后的文件，放到云服务器或是服务器主机中，可以供任何人访问，使用的一个环境（ 这个环境的上线要经过国家审核 ）

  5. 前端核心关注点在：

  • 开发环境
  • 生产环境

五、Webpack的安装

安装可以使用任何一个包管理器： npm yarn cnpm

yarn > cnpm > npm 优先级

举例： 我使用npm安装了一个叫做 node-sass 的包 ，但是出错了 ，这时，我们想卸载，发现卸载报错

解决： 可以覆盖安装

cnpm || yarn 进行覆盖安装

cnpm 和 yarn 优先级没有那么绝对

1.全局安装( 选择以下一种即可，这个是webpack和webpack-cli一起安装 )

$ npm install webpack webpack-cli -g

$ cnpm install webpack webpack-cli -g

$ yarn add webpack webpack-cli global

2.局部安装

$ npm install webpack webpack-cli -D

$ cnpm install webpack webpack-cli -D

$ yarn add webpack webpack-cli -D

局部优先级 > 全局

六、Webpack的概念

  • webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将***所有***这些模块打包成一个或多个 bundle（ 分块束 ）

    理解：

    ​ 举例： 我们有两个模块，A模块引用了B模块，我们现在使用webpack打包A模块，webpack会自动寻找A和B之间的关系，进而也会打包B模块

七、Webpack 使用

默认源代码开发目录为： src

默认的入口文件名称为： src/index.js

默认出口目录为： dist

默认出口打包文件名称为： main.js

通过mode来设置是那个环境下打包使用

开发环境打包： 代码不经过压缩、注释不会被删除

eval 这个方法时用来解析字符串，这个字符串里面有js代码 【 性能不太好 】

1.终端命令行使用

  • 终端运行 webpack

    • 当我们局部安装了webpack webpack-cli后，发现运行webpack报错，命名找不到

      • 解决： 全局安装webpack webpack-cli

    • 默认生成环境打包

  • webpack --mode development/production 选择开发环境/生产环境打包

2.配置文件使用

  • 默认webpack配置性文件名称为 webpack.config.js，这个文件是在根目录下运行的
  • 运行 webpack 命令就会自动的去寻找这个 文件
  • webpack.config.js文件中我们配置的就是 webpack的参数

3.配置webpack.config.js文件

我们接下来对这个文件进行配置，主要从以下几个方面来着手

  1. 基础功能 ：  入口   出口 文件配置
  2. 转换器： loader 
  3. 插件: plugin
  
  单页面配置  vs  多页面配置 
  	单页面配置指的只有一个入口一个出口的项目  【 推荐 】
  	多页面配置指的是有多个入口多个出口的项目
1.单页面配置
1.1 基础功能
/* 
  webpack配置文件
  也是Node.js文件
  这个文件也是一个独立的 Common.js 模块
*/

const path = require('path')

// 1. 创建模块

const webpackConfig = {
  entry: './src/index.js', //网络路径（ 相对路径 ）
  output: { //出口目录、文件的配置
    path: path.join( __dirname,'dist'), // 磁盘路径
    filename: 'js/app.js' // 入口文件将来打包到出口目录中的文件的路径和名称，默认的为main.js,可以修改
  },
  mode: 'development'//确定是生产环境还是开发环境的打包(这里选的是开发环境，代码不会被压缩)
}

// 2. 导出模块

module.exports = webpackConfig
1.2 问题： 验证webpack是否能自动解决模块化依赖问题 可以
1.3 loader 转换器 可以将其他类型文件转换为我们想要的类型文件

​ 举例： 实现css的使用

  /* ------------------------------- 转换器 ------------------------------ */
  // 在webpack.config.js中做如下配置：
  module: { //这里用来存放转换器的配置
    rules: [
      // {} //每一个对象就是一个转换器的配置
      {//css的处理
        test: /\.css$/, // 整个项目下匹配 .css结尾的文件
        use: ['style-loader','css-loader'] //两个顺序是不写反的
        // 我们需要使用css-loader将css文件编译为js,然后通过style-loader将js处理插入到html文件中【 style 嵌入模式 】
      }
    ]
  },
1.4 配置前端静态服务器
	//需要自动刷新： webServer 搭建前端开发服务器
    cnpm install webpack-dev-server -g | -D
    参数:
        命令行
        webpack-dev-server --port 8088 --open --mode development

        写到webpack.config.js配置文件:

        devServer: {//和module同级
            port: 8088,
            open:true，//自动打开
            hot:true，//热重载
        }

        终端运行方式2: webpack-dev-server
    
    把运行命令放到package.json文件:    devServer可以不要了
        "scripts":{
            "dev": "webpack-dev-server  --port 8088 --open"
        }

        终端: npm run dev
1.5 优雅降级配置

  • 先安装转换器需要的包

    $ cnpm install babel-loader@8.0.4 @babel/core @babel/preset-env -D

  • 配置webpack.config.js

    	// 在webpack.config.js的module.rules中进行配置
        {// 配置优雅降级
            test: /\.js$/,
            exclude: /node_modules/, // 排除node_models中的js文件
            use: [{
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }]

          }
1.6 html产出 - 依赖的是插件

  • 安装插件需要的第三方包

    $ cnpm i html-webpack-plugin -D

    	const HtmlWebpackPlugin = require('html-webpack-plugin')
	
    //添加一个配置项
    plugins:[
            new HtmlWebpackPlugin({
                template: './public/index.html',
                filename: './index.html',//默认到output目录
                hash:true,//防止缓存,会给文件后面加入hash
                minify:{
                    removeAttributeQuotes:true//压缩 去掉引号
                }
            })
    ]
1.7 css抽离 - 依赖的是插件

将webpack编译过得css文件以 css外部引用的形式引入

  • 安装插件

    $ cnpm i extract-text-webpack-plugin@next -D(官网的好像有些问题)

    //css抽离，区别前面的css样式文件先转js，再以style标签的形式引入html,这里是以外部文件引入，link形式。
//还有，做这个css抽离，要直接运行这个，不能先以上面的形式style引入，再又转link，会报错
//这里也可以将less和sass文件都转成同一个css文件,再link引入html。
    const ExtractTextWebapckPlugin= require("extract-text-webpack-plugin")
	//上面的这个插件需以 $ cnpm i extract-text-webpack-plugin@next -D 也就是下一个beta版本才行
    
    //loader配置：
    {
        test: /\.css$/,
        use : ExtractTextWebpackPlugin.extract({
            use: [
                { loader: "css-loader" }
            ]
        })
    }，
    {
        test: /\.less$/,
        use : ExtractTextWebpackPlugin.extract({
            use: [
                { loader: "css-loader" },
                { loader: "less-loader" }
            ]
        })
    },
    {//对于sass,除了对应的loader安装外，还要装node-sass才行,这里.scss可以，但是.sass试会出错
        test: /\.scss$/,
        use : ExtractTextWebpackPlugin.extract({
            use: [
                { loader: "css-loader" },
                { loader: "sass-loader" }
            ]
        })
    }

    //pulgin配置
    new ExtractTextWebpackPlugin({
            filename: "css/common.css"//选择一个文件来存，编译后的css，
            //还可以在common后面加[hash:6]添加6位hash值来防止再次打包时，
            //前一个css文件被同名覆盖，可以用来回溯前一个css文件版本
        })

对于分别抽离再以link引入html：
可以参考https://blog.csdn.net/weixin_44101052/article/details/86577568

1.8 图片打包
yarn add url-loader file-loader -D

    //url-loader 存base64  file-loader存文件（woff mp3）
    {
        test:/\.(png|jpg|gif)/,
        use:[{
          loader: 'url-loader',
          options: {
            limit: 5000,//字节少于5000 ——>用url-loader转成
            //base64，不会存到images中，超过5000用file-loader原样输出
            outputPath: 'images/', //超过5000存到images文件夹下
          }
        }]
      }

//css中引入 | js动态(模块化) 引入
1.9 静态资源拷贝
  npm i copy-webpack-plugin -D

    const CopyWebpackPlugin = require('copy-webpack-plugin')
//plugin配置
    new CopyWebpackPlugin([
      { from: path.resolve(__dirname,'static'), to: 				path.resolve(__dirname,'build/static') }
    ])
1.10 配置文件拆分

1、因为这里分开发环境和生产环境，所以这里将webpack.config.js一般单独的弄一个文件夹config放置，里面有webpack-config-dev.js(代表开发环境下)、webpack-config-prod.js(代表开发环境下)的webpack配置文件
2、不同之处：一般写开发的入口文件目录为build，生产的为dist，对应文件对应修改，然后里面的端口两者也要不一样，因为可能会在一个网址中查看，所以端口不能一样，还要这里写的文件路径最好都写成path.join(__dirname,‘文件对应当前配置文件的路径’)这种形式，在生产环境中不这么写，会报错！
3、这里写在生产环境下的好像只有js文件压缩了，html和css都没有被压缩。

"dev": "webpack --mode development --config config/webpack.config.dev.js",
"build": "webpack --mode production --config config/webpack.config.prod.js",
"server": "webpack-dev-server --mode development --config config/webpack.config.dev.js"
1.11 错误资源定制
// 在webpack.config.js中添加如下配置项：
devtool: 'source-map'  
制定报错信息的源
2.多页面配置
2.1 基础功能
/* 
  webpack配置文件
  也是Node.js文件
  这个文件也是一个独立的 Common.js 模块
*/

const path = require('path')

// 1. 创建模块

const webpackConfig = {
  entry: { // 多页面配置，多个入口文件
    'index': './src/index.js',
    'main': './src/main.js'
  }, //网络路径（ 相对路径 ）
  output: { //出口目录、文件的配置
    path: path.join( __dirname,'dist'), // 磁盘路径
    filename: 'js/[name].js' // 入口文件将来打包到出口目录中的文件的路径和名称,这里的[name]会自动使用上面入口文件的键名。
  },
  mode: 'development'//确定是生产环境还是开发环境的打包
}

// 2. 导出模块

module.exports = webpackConfig

​

​

​

congboer
关注
webpack配置完全指南
gogo2027的博客
10-03 3135
来看一下官网对webpack的定义：本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。首先webpack是一个静态模块打包器，所谓的静态模块，包括脚本、样式表和图片等等；
webpack-config-reload:热加载 webpack 配置。修改 webpack 相关配置文件后，自动重启脚本命令，比如 dev-server
05-05
修改 webpack 相关配置文件后，自动重启脚本命令，比如 dev-server，比较方便的是在调试 webpack 繁琐的配置时候，省去一遍遍地 Ctrl+c 和重复输入命令。 注意：只支持 webpack/webpack-dev-server 两个命令。 安装...
十一、webpack配置文件的抽离
唐都恩了的博客
03-11 277
开发时依赖一个文件、上线时依赖一个文件、然后还有一个公共的合并文件 开发时用开发文件合并公共文件 生产时用生产文件合并公共文件 帮助我们对两个配置文件进行合并的依赖：npm install webpack-merge --save-dev 抽离后代码： 将生产环境的配置提取到生产环境的文件夹，然后与公共环境配置文件合并，在打包的时候指定这个文件为配置文件 开发环境同理（详情看图中三四代码） ...
webpack的配置
专研技术的大学生
09-05 1262
Webpack的配置详解
webpack配置
m0_60505147的博客
10-09 1万+
webpack是前端的打包工具打包的工作内容是什么扫描项目，生成整个项目所有模块的依赖关系，根据配置对模块进行合并，生成一个单独的文件。修改html文件，让html文件引用生成后的文件将浏览器无法直接识别的（less、sass、ts）文件，转换成浏览器可以实现的内容。将浏览器暂时无法支持的JS新的语法转换成浏览器可以支持的语法。
webpack基本的配置
读心悦
07-06 3319
现在的前端，出现很多种可以提高开发效率的工具和框架，但是源码却不能直接运行，只有通过转换之后才能正常运行。那么构建就是把源码转化为可以执行的JavaScript、HTML和CSS代码。
webpack基本配置
weixin_51977111的博客
03-05 9499
不足，请补充
Webpack配置
nanxun201314的博客
03-15 2872
Loader本质就是一个函数，在该函数中对接收到的内容进行转换，返回转换后的结果。因为 Webpack 只认识 JavaScript，所以 Loader 就成了翻译官，对其他类型的资源进行转译的预处理工作。Plugin就是插件，基于事件流框架Tapable，插件可以扩展 Webpack 的功能，在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。
webpack相关配置
热门推荐
官方推荐
01-04 4万+
文章目录???? webpack的概念???? webpack的基本使用项目目录并初始化创建首页及js文件以jQuery为例安装jQuery导入jQuery安装webpack???? webpack的相关设置设置webpack的打包入口/出口设置webpack的自动打包配置html-webpack-pluginwebpack中的加载器???? 使用webpack打包发布项目???? 在webpack中使用vueVue单文件组件在webpack中使用vue????写在最后 ???? webpack的概念 we
关于Webpack打包的一些配置
weixin_41989250的博客
12-07 2189
开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法，才能运行。所以我们需要打包工具帮我们做完这些事。除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。 是一个静态资源打包工具。它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以在浏览器运行了。我们将 输出的文件叫做 。web
webpack的一些常用打包配置
蓝胖子的博客
10-12 4304
webpack的一些常用打包配置
webpack5配置之vue3
12-14
基于webpack5构建的vue3项目，可用来学习webpack5的常用配置，和常见优化。https://webpack.docschina.org/plugins/image-minimizer-webpack-plugin/#root。 基于webpack5构建的vue3项目，可用来学习webpack5的常用...
webpack高级配置与优化详解
10-15
在webpack配置文件中，entry对象用于定义应用的入口点。每个入口点都对应一个入口文件，webpack会从这个入口文件开始进行依赖分析，生成一个chunk（代码块）。在多页面应用中，可以这样定义多个入口： ```...
webpack配置配置介绍和操作指引
05-27
这个教程将引导你深入了解 Webpack 的配置和操作，帮助你更好地管理和优化你的前端项目。 ## 一、Webpack 基本概念 Webpack 是一个静态模块打包器，它会分析你的项目依赖，然后将这些模块打包成静态资源。Webpack ...
毕业设计论文SpringBoot+Vue毕业生信息招聘平台.docx
10-16
毕业设计论文
PHP-006教务选课学生选课成绩管理系统毕业课程源码设计+论文资料
10-16
编号：306 作为php高校院务学生选课成绩管理系统，在系统中有学生信息和教师信息以及课程信息需要管理员分类管理。 (1)学生管理：管理员登录系统后可以添加学生，查询学生，修改学生，删除学生信息。 (2)教师管理：管理员登录系统后可以添加教师，查询教师，修改教师，删除教师信息。 (3)课程管理：管理员登录系统后可以登记新的课程信息，查询修改课程信息，删除课程信息. (4)授课信息管理：管理员登录系统后可以分配课程由哪个老师教授。 (5)班级信息管理：管理员可以在系统其他功能运行前先把班级信息设置好。 (6)选课管理：学生登录系统后可以对课程进行选择。 (7)成绩管理：教师登录系统后，可以查询自己教授的课程并对学生的成绩打分。 (8)系统管理： 修改登录密码，关于系统说明
在线教育视频&JAVA&基于SpringBoot的在线视频教育平台的设计与实现（毕业论文+开题）
10-16
本系统采用的数据库是Mysql，使用SpringBoot框架开发， 使用在线视频教育平台分为管理员和用户、教师三个角色的权限模块。 管理员所能使用的功能主要有：首页、个人中心、用户管理、教师管理、课程信息管理、课程类型管理、我的收藏管理、系统管理、订单管理等。 用户可以实现首页、个人中心、课程信息管理、我的收藏管理、订单管理等。 教师可以实现首页、个人中心、课程信息管理、我的收藏管理等。
个性化影片推荐系统.zip
最新发布
10-16
随着科学技术的飞速发展，社会的方方面面、各行各业都在努力与现代的先进技术接轨，通过科技手段来提高自身的优势，个性化影片推荐系统当然也不能排除在外。 个性化影片推荐系统，在个性化影片推荐系统可以查看首页、热门电影、新闻资讯、我的、跳转到后台、客服等内容
webpack基础配置与使用指南
在webpack配置文件中，会定义入口文件（entry）和输出文件（output），以及需要加载的loader和插件，以满足项目的特定需求。 webpack通过灵活的配置和丰富的生态系统，成为了现代前端项目中不可或缺的构建工具，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值