0
点赞
收藏
分享

微信扫一扫

Webpack

草原小黄河 2022-03-13 阅读 53
webpack前端

webpack

概念：webpack 是前端项目工程化的具体解决方案(webpack 是基于 node.js 开发出来的打包工具)。

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

webpack基本使用

  • 新建项目目录，cmd进入该路径下，并运行 npm init –y 命令，生成 package.json文件
  • 新建 src 目录
  • 在 src目录下新建 index.html 和 index.js
  • 初始化首页基本的结构
  • cmd运行 npm install jquery –S 命令，安装 jQuery
  • 通过 ES6 模块化的方式导入 jQuery，实现列表隔行变色效果

(ps:进入文件夹，全选文件路径，输入cmd回车，即可快速进入该路径下的cmd；另外cmd操作都是在该路径下)

主要代码：

//index.html
<body>
  <ul>
    <li>这是第 1 个 li</li>
    <li>这是第 2 个 li</li>
    <li>这是第 3 个 li</li>
    <li>这是第 4 个 li</li>
    <li>这是第 5 个 li</li>
    <li>这是第 6 个 li</li>
    <li>这是第 7 个 li</li>
    <li>这是第 8 个 li</li>
    <li>这是第 9 个 li</li>
  </ul>

</body>

//index.js
// 导入 jQuery
import $ from 'jquery'

$(function () {
  // 奇数行为红色
  //偶数行为绿色
  $('li:odd').css('background-color', 'red')
  $('li:even').css('background-color', 'green')
})

在这里插入图片描述

(因为兼容性问题，页面显示不出效果，需要webpack处理)

  • 在项目中安装 webpack

    在cmd运行如下的命令，安装 webpack 相关的两个包：

    npm install webpack@5.42.1 webpack-cli@4.9.0 -D

  • 在项目中配置 webpack

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

    module.exports = {
    mode: 'development',
    //development适合开发环境，打包速度快，不会对打包生成的文件进行代码压缩和性能优化
    //production生产环境,会对打包生成的文件进行代码压缩和性能优化打包速度很慢，仅适合在项目发布阶段使用
}

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

    (2)在 package.json 的 scripts 节点下，新增 dev 脚本如下：

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

​ (3)在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建。(生成main.js文件)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-08sEZen9-1647137354890)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\image-20220307102152265.png)]

​ (4)最终目录和效果

在这里插入图片描述
在这里插入图片描述

  • 在 webpack 4.x 和 5.x 中， 默认的打包入口文件为 src 目录下的index.js；默认的输出文件路径为 dist 路径下的 main.js。

  • 可以自定义打包的入口与出口：在webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口：

    const path = require('path')

module.exports = {
    mode: 'development',
    // entry：指定要处理哪个文件
     			      entry:path.join(__dirname,'./src/index.js'),//可以修改js文件

    // 指定生成文件存放到哪里
    output: {
        path: path.join(__dirname,'dist'),
        //生成的文件名
        filename:'bundle.js'//可以修改js文件名称
    }
}

  • 补充：‘@’表示src源代码目录，不用使用…/从里往外查找；使用@需要配置：

    //webpack.config.js中module.exports：
resolve:{
	alias:{
		'@':path.join(__dirname, './src/')
	}
}

webpack 中的插件

（1）webpack-dev-server

webpack-dev-server 可以让 webpack 监听项目源代码的变化，从而进行自动打包构建，每当修改了源代码，webpack 会自动进行项目的打包和构建

  • 安装 webpack-dev-server

项目中安装此插件：

npm install webpack-dev-server@3.11.2 -D

  • 配置 webpack-dev-server

    1.修改 package.json 中scripts 中的 dev 命令：

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

    2.再次运行 npm run dev 命令，重新进行项目的打包

    3.在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

（ps:没有使用这个插件时，webpack 打包生成的文件，会存放到实际的物理磁盘上；配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中）

在这里插入图片描述

​ 4.生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的。 直接用 / 表示项目根目录，后面跟上要访问的文件名称，即可访问；例如 /bundle.js 就表示要访问内存中的 bundle.js 文件

​ (2)html-webpack-plugin

html-webpack-plugin 插件，将 src 目录下的 index.html 首页，复制到项目根目录中一份。

  • 安装 html-webpack-plugin

    项目中安装此插件：

    npm install html-webpack-plugin@5.3.2 -D

  • 在webpack.config.js配置 html-webpack-plugin

    // 导入html插件
const HtmlPlugin = require('html-webpack-plugin')

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

module.exports = {
    plugins:[htmlPlugin],
}

    （重新npm run dev 访问http://localhost:8080/即可）

​ （3）devServer 节点

在 webpack.config.js 配置文件中， 对devServer 节点进行配置：

// 指定生成文件存放到哪里
    output: {
        path: path.join(__dirname,'dist'),
        //生成的文件名
        filename:'bundle.js'
    },
    plugins:[htmlPlugin],
    devServer:{
        open:true, //自动打开浏览器
        host:'127.0.0.1', //实时打包所以的主机地址
        port:80, //实时打包所有端口号，在http协议中，端口号是80可以被省略
        }

webpack 中的 loader

  • loader 概述

在实际开发中，webpack 默认只能打包处理以 .js 结尾的文件。其他文件webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！

  • loader 加载器的作用：

    协助 webpack 打包处理特定的文件模块。比如： css-loader 可以打包处理 .css 相关的文件; less-loader 可以打包处理 .less 相关的文件;babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法

  • 打包处理 css 文件 ：

    运行 npm i style-loader@3.0.0 css-loader@5.2.6 -D 命令，安装处理 css 文件的 loader ；在 webpack.config.js 的 module 的rules 数组中，添加 loader 如下：

    module: {
        rules: [
            {test: /\.css$/, use: ['style-loader','css-loader']}
        ]
    //test表示匹配的文件类型，use表示要调用的loader
    }

    (use 数组中的 loader 顺序固定 ;多个 loader 的调用顺序是：从后往前调用)

  • 打包处理 less 文件 :

    运行 npm i less-loader@10.0.1 less@4.1.1 -D 命令 ;在 webpack.config.js 的 module 的rules 数组中，添加 loader 如下：

module: {
        rules: [
            {test: /\.less$/,use:['style-loader','css-loader','less-loader']},
        ]
    }
  • 打包处理样式表中与 url 路径相关的文件

    运行 npm i url-loader@4.1.1 file-loader@6.2.0 -D 命令;

    在 webpack.config.js 的 module 的 rules 数组中，添加 loader 如下：

    module: {
        rules: [
            {test: /\.jpg|png|gif$/, use:'url-loader?limit=xxxx'},
        ]
    }

    (? 之后的是 loader 的参数项： limit 用来指定图片的大小，单位是字节;只有 ≤ limit 大小的图片，才会被转为 base64 格式的图片)

  • 那些webpack 无法处理的高级 js 语法，需要借助于 babel-loader 进行打包处理。

    （1）安装 babel-loader 相关的包：运行如下的命令安装对应的依赖包：

    npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

    （2）在 webpack.config.js 的 module 的rules 数组中，添加 loader 如下：

    module: {
        rules: [
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
        ]
    }

    (3)在项目根目录下，创建名为 babel.config.js 的配置文件，定义 Babel 的配置项如下：

    module.exports = {
  plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
}

  • 打包发布

    （1）项目开发完成后需要使用 webpack 对项目进行打包发布，因为开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件；打包生成的文件不会进行代码压缩和性能优化，可以让项目能够在生产环境中高性能的运行。

    （2）在 package.json 文件的 scripts 节点下，新增 build 命令：

     "scripts": {
    "dev": "webpack serve",
    "build": "webpack --mode production"
     //"build"名字可改成其他的
  },

    接着在cmd输入npm run build 即可（ps:–model 是一个参数项，用来指定 webpack 的运行模式。production 表示生产环境，会对打包生成的文件进行代码压缩和性能优化同时会覆盖 webpack.config.js 中的 model 选项）

​ （3）把js文件统一生成到js目录中：

​ 在 webpack.config.js 配置文件的 output 节点中：

output: {
        path: path.join(__dirname,'dist'),
        //生成的文件名
        filename:'js/bundle.js'
    },

​ (4)把图片文件统一生成到 image 目录中

修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项:

{test: /\.jpg|png|gif$/, use:'url-loader?limit=470&outputPath=images'},

​ (5)为了避免dist里面重复文件需要手动删除，比较麻烦，使用clean-webpack-plugin插件可以自动清理 dist 目录下的旧文件，安装步骤：

​ 1.cmd输入如下命令：

​ npm install --save-dev clean-webpack-plugin

​ 2.在webpack.config.js文件下添加：

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

//直接在原有的plugins里添加
plugins:[htmlPlugin, new CleanWebpackPlugin()]

​ 3.使用npm run dev 测试即可

  • Source Map

    （1）Source Map 是一个信息文件，储存着位置信息。Source Map 文件中存储着压缩混淆后的代码，所对应的转换前的位置。当出错的时候，除错工具将直接显示原始代码和位置信息，方便后期的调试。

    （2）开发环境下默认生成的 Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行

    数不一致的问题，解决方法：

    //在webpack.config.js的module.exports下添加如下：

devtool: 'eval-source-map',

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

    （4）在生产环境下（实际发布时），如果只想定位报错的具体行数，且不想暴露源码，可以将 devtool 的值设置为nosources-source-map；如果想在定位报错行数的同时，展示具体报错的源码。此时可以将 devtool 的值设置为source-map。

    （5） Source Map 的使用建议

    开发环境下：建议把 devtool 的值设置为 eval-source-map，

    可以精准定位到具体的错误行；

    生产环境下：建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map，防止源码泄露，提高网站的安全性

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

    （4）在生产环境下（实际发布时），如果只想定位报错的具体行数，且不想暴露源码，可以将 devtool 的值设置为nosources-source-map；如果想在定位报错行数的同时，展示具体报错的源码。此时可以将 devtool 的值设置为source-map。

    （5） Source Map 的使用建议

    开发环境下：建议把 devtool 的值设置为 eval-source-map，

    可以精准定位到具体的错误行；

    生产环境下：建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map，防止源码泄露，提高网站的安全性

举报

相关推荐

【Webpack】Webpack

webpack前端javascript

Webpack——Webpack简介

webpack前端node.js

webpack----认识webpack

webpackjavascriptjson

webpack入门启动webpack工程

webpackhtml文件名配置文件Python后端开发

WebPack

webpack

【Webpack--000】了解Webpack

chatgpt人工智能机器学习职场和发展

webpack

webpack前端

webpack插件compression-webpack-plugin

webpack前端node.js

【webpack】__webpack_public_path__作用

node系列让前端飞

WebPack实战 WebPack打包Vue项目

webpackvue.jsnpm前端生产环境JavaScript前端开发
0 条评论