Webpack入门 | 青训营笔记

用户2147483647
88 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的的第13天。

今天我们聊一下目前主流的前端工程化解决方案：Webpack

如果有兴趣，可以看看我之前的文章：红包算法之如何助你抢到大红包 | 青训营笔记 - 掘金 (juejin.cn)。

Webpack

什么是webpack

概念:webpack 是前端项目工程化的具体解决方案。

  • webpack是一个模块打包器(bundler)。
  • 在webpack看来, 前端的所有资源文件(js/json/css/img/less/…)都是模块。
  • 它将根据模块之间的依赖关系进行分析，生成对应资源。

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

好处: 让程序员把工作的中心放在具体功能的实现上，提高了前端开发效率和项目的可维护性。

注意：在vue和react等前端项目，基本上都是基于webpack进行工程化开发的。

核心概念

  • entry（入口）：指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。

  • output（输出）：属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。

  • loader（加载器）：webpack 本身只能处理 js/json 文件，loader 可以让webpack处理其他类型文件。

  • plugins（插件）：插件可以执行范围更广的任务，即loader无法完成的，插件或许可以完成。

  • mode（模式）：有生产模式 production 和开发模式 development 。

  • 理解 loader

    • loader 本质是运行在 Node.js 中的就是js代码。
    • loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 对应的功能，比如 less-loader。

Webpack使用

使用 webpack 配置文件

  • 目的：在项目根目录定义配置文件，通过自定义配置文件，还原以上功能

  • 文件名称：webpack.config.js

  • 文件内容：

    //node内置核心模块，用来设置路径。
const { resolve } = require('path');
//只能使用 CommonJS 规范暴露
module.exports = {
  // 入口文件配置
  entry: './src/js/app.js',   			
  // 输出配置
  output: {         
    // 输出文件名
    filename: './js/built.js',    
    //输出文件路径配置
    path: resolve(__dirname, 'build')   
  },
  // development 与 production 开发环境(二选一)
  mode: 'development'   				
};

  • 运行指令： webpack

 loader概述

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

比如less 文件 webpack 不能解析，需要借助 loader 编译解析，使用步骤如下：

  1. 创建less文件
  • src/css/demo.less
  1. 入口app.js文件
//引入less 文件
import '../css/demo.less';
  1. 安装 loader
npm install css-loader style-loader less-loader@7 less --save-dev
  • webpack 4 现在不能直接安装 less-loader 最新版本, 要安装 less-loader@7 版本

  1. webpack.config.js 配置 loader

    module.exports = {
    .....
    module:{
        rules:[
            {
                test:/.less$/,  		// 检查文件是否以.less结尾（检查是否是less文件）
                use:[				   // 数组中loader执行是从下到上，从右到左顺序执行
                    'style-loader', 	// 将样式模块打包进app.js文件中
                    'css-loader', 		// 将css样式变为CJS的一个样式模块
                    'less-loader' 		// 将less样式解析成css样式
                ]
            }
        ]
    },
}

  2. 运行指令

    webpack

    以上就是Webpack的基本入门了，如有不对之处，欢迎指出

avatar
文章
阅读
粉丝