安装Webpack/配置webpack.config.js

最新推荐文章于 2024-09-19 21:09:22 发布
最新推荐文章于 2024-09-19 21:09:22 发布
阅读量609 收藏
点赞数
文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44884546/article/details/98241910
版权
本文介绍了Webpack，一个流行的前端工程化工具，及其替代品如Grunt、Gulp、Rollup和Parcel。讲解了Webpack的发展历程、版本特性，以及如何手动配置Webpack，包括单页面和多页面配置。还提到了Webpack涉及的前端环境问题，如开发、生产、测试环境的差异。最后，文章阐述了Webpack的安装方法和基本概念，强调了Webpack作为模块打包器的角色。
摘要由CSDN通过智能技术生成

Webpack

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

  1. grunt
  2. gulp ( 4.x )
  3. Browserify ( Webpack 前身 )
  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来进行开发、管理

cli是自动构建一个项目，下面是通过webpack自主构建一个项目

目标：⭐

​ - 通过webpack自主构建一个项目 【 手动构建一个项目 】

  • webpack基本配置
  • 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 优先级没有那么绝对,有时cnpm比yarn高，有时反之

文件中首先需要package.json文件，所以要$cnpm init -y

1.全局安装( 选择以下一种即可 )

$ 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，那么再把全局也装上。

六、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来设置是哪个环境下打包使用：

webpack --mode development 开发环境打包

webpack --mode production 生产环境打包

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

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

1.终端命令行使用

安装了webpack 和webpack-cli后，全局命令中就多了一个webpack命令

  • 终端运行 webpack

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

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

    • 默认生成环境打包

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

    过程：

    前提是webpack已经成功安装，建一个src文件夹——src下建一个js文件——终端命令行使用webpack——产生dist文件夹【文件夹中的main.js是存放了压缩的文件，是经过压缩的。如果终端运行的是webpack --mode development 即开发环境打包，那么代码是不经过压缩、且注释不会被删除的】——有了js文件了，那么接下来肯定需要一个html文件把js文件引入一下——查看结果肯定是没问题的。

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' // 入口文件将来打包到出口目录中的文件的路径和名称
                          // 简单来说【给出口文件一个名称和存放路径】
  },
  mode: 'development'//确定是生产环境还是开发环境的打包，【生产环境不被压缩，且注释不被解析】
}

// 2. 导出模块

module.exports = webpackConfig
1.2 问题： 验证webpack是否能自动解决模块化依赖问题 可以

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

在src文件夹下建一个module文件夹——里面建一个name.js文件，因为是模块，所以要导出模块——在index.js中引入模块，使用模块——终端运行webpack——此时查看被自动新建出来的js文件中name.js也被打包了——证明了webpack可以解决模块化依赖问题

//name.js
const people = {
    id: 1,
    name: sunhejie
}
module.exports = people

//index.js
var people = require('../src/module/name.js') //引入
console.log(people.name)
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
        }

        终端运行方式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 -D

    
    const ExtractTextWebapckPlugin= require("extract-text-webpack-plugin")

    //loader配置：
    use: ExtractTextWebapckPlugin.extract({
          use: 'css-loader'
        }) //不再需要style-loader

    //pulgin配置
    new ExtractTextWebapckPlugin('css/[name][hash:6].css')
1.8 图片打包
yarn add url-loader file-loader --dev

npm I url-loader file-loader --save-dev

    //url-loader 存base64  file-loader存文件（woff mp3）
    {
        test:/\.(png|jpg|gif)/,
        use:[{
          loader: 'url-loader',
          options: {
            limit: 5000,//字节少于5000 ——》 base64  超过5000  file
            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 配置文件拆分
"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和main是随意写的key名称，但是这里的key会被打包成最后的出口文件的文件名称
    'index': './src/index.js',
    'main': './src/main.js'
  }, //网络路径（ 相对路径 ）
  output: { //出口目录、文件的配置
    path: path.join( __dirname,'dist'), // 磁盘路径
    filename: 'js/[name].js' // 入口文件将来打包到出口目录中的文件的路径和名称
  },
  mode: 'development'//确定是生产环境还是开发环境的打包
}

// 2. 导出模块

module.exports = webpackConfig

​

​

​

赤脚踢榴莲
关注
细说webpack-dev-server --inline --progress --config build/webpack.dev.conf.js的一二三
changyandou2020的博客
08-10 1136
在vue-cli的脚手架创建后开发环境调试下webpack-dev-server是如何读取webpack.dev.conf.js中的内容的
webpack.config.js配置文件
06-19
最近刚学的webpack3.0，从零到一套相对比较齐全的配置
妈妈再也不用担心我不会webpack了
weixin_34034670的博客
11-12 271
前言webpack前端工程中扮演的角色越来越重要，它也是前端工程化很重要的一环。本文将和大家一起按照项目流程学习使用wbepack，妈妈再也不用担心我不会使用webpack，哪里不会看哪里。这是一个由浅入深的文章。 工程化 这里是一个项目工程化，规范化的设置，如果是初次使用webpack的同学还是最后在看这一块知识 现在vue、react等脚手架都会自动将开发环境使用的webpack的配置文件和...
【Webpack--011】配置开发和生产模式的webpack.config.js
最新发布
m0_61486963的博客
09-19 925
【Webpack--011】配置开发和生产模式的webpack.config.js
webpack.config.js
04-24
webpack.config.js
浅谈webpack的重要功能——Plugins
筱葭的博客
04-03 1万+
webpack中另一个非常重要的功能是Plugins。 插件（Plugins）是用来拓展webpack功能的，它们会在整个构建过程中生效，执行相关的任务。 Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西：Loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个;插件并不直接操作单个文件，它直接对整个构建过程其作用。 webpac
webpack的配置文件
u010620152的博客
11-27 485
const path = require('path'); module.exports = { entry: "./app/entry", // string | object | array // 这里应用程序开始执行 // webpack 开始打包 output: { // webpack 如何输出结果的相关选项 path: path.resolv
webpack.config
沐光之辰
06-12 380
webpack一些配置，要说的大部分在代码注释里了 // options: { // presets: [['@babel/preset-env',{ // // targets: { // // chrome: "67", // // }, // useBuiltIns: 'usage' // 可以按需打包编译Es6的代码，使得打包出来...
webpack教程之webpack.config.js配置文件
10-19
`webpack.config.js` 文件是 Webpack 的核心配置文件，它定义了项目的输入、输出、加载器、插件等设置。这篇教程将带你了解如何配置 `webpack.config.js` 文件。 首先，安装 `html-webpack-plugin` 插件。这个插件...
vue中不通过./build/webpack.base.conf.js 配置使用jquery
yth_m_123的博客
05-20 4930
在使用vue-cli搭建的项目中，是无法直接在组件中使用jquery的。如果想使用，要先进行一些配置。 网上许多文章都是介绍如何在./build/webpack.bace.conf.js文件中配置使用jquery，但是有些人的项目目录中没有./build，这应该只是脚手架搭建的目录结构不同。 这时候应该找node_modules/@vue/cli-service/webpack.config.js这个文件，进行配置。 1.安装jquery $ cnpm install jquery -S 或者 $ npm
【react笔记】关于在webpack.config.dev.js和webpack.config.prod.js里配置antd
supercolorpower的博客
12-21 8342
在.babelrc中配置antd的方法移步官网https://ant.design/docs/react/introduce-cn 另一种方法的前提是我们已经将配置文件暴露出来了。暴露方法https://blog.csdn.net/weixin_41606276/article/details/85123919 因为我的脚手架版本较高，所以现在网上的方法都不适用。在我的不断尝试下，终于配置成功...
webpack之webpack.config.js配置
热门推荐
chen4565的博客
06-21 2万+
webpack之webpack.config.js配置 wbepack.config.js webpack的配置文件详解: ​ 作用: 指示 webpack 干那些活(当你运行 webpack 指令时, 会加载里面的配置) ​ 所有构建工具都是基于node.js平台运行的~模块化默认采用commonjs, ​ 概念:我们创建的src文件是我们写项目的源代码,用的是ES6模块化 ​ 而wbepack.config.js文件是我们写配置的源代码,默认用的是commonjs  
webpack学习之webpack.config.js详解
朽木自雕的博客
02-06 6341
一、webpack基础配置 在项目根目录创建webpack.config.js 文件，只能是这个文件名 打开 webpack.config.js ，开始编写配置信息 // 输出模块 // __dirname是nodejs的一个全局变量，它指向当前执行脚本所在的目录。 module.exports = { entry: __dirname + "/src/index.js"...
webpack配置webpack.config.js
姚辉乾
04-17 8649
1.新建一个webpack.config.js 2.配置入口entry（所需打包的文件路径） 3.配置出口output （1）path 指的是文件打包后的存放路径 （2）path.resolve（）方法将路径或者路径片段的序列号处理成绝对路径 （3）__dirname表示当前文件所在的目录的绝对路径 （4）filename是打包后文件的名称 ...
webpack / webpack.config.js配置
c_liufeng的博客
11-29 548
/** * webpack配置 */ // 引入node.js的模块path, resolve 用来拼接绝对路径的方法 const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); // module.exports = { entry: './src/index.js', output: { filename: 'built.js',
[webpack-cli] TypeError: [“webpack.config“,“.webpack/webpack.config“,“.webpack/webpackfile“].flatMap
10-02
引用中提到的错误`[webpack-cli] TypeError: ...关于问题中提到的`[“webpack.config“,“.webpack/webpack.config“,“.webpack/webpackfile“].flatMap`，我无法提供相关的解答，因为这是一个无效的引用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值