webpack基础

最新推荐文章于 2026-01-07 09:24:08 发布

原创

最新推荐文章于 2026-01-07 09:24:08 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #前端 #node.js

本文介绍了webpack的核心概念，包括入口、输出、loader和插件。详细讲解了webpack的基本和高级配置，以及性能优化策略，如多进程打包、代码压缩和懒加载。还涉及到Babel的环境搭建和相关配置，并探讨了webpack的面试题，如loader和plugin的区别，以及前端打包和构建的目的。

文章目录

webpack核心概念

入口(entry)：指示 webpack 应该使用哪个模块

// 可以通过webpack configuration中配置entry属性指定n个不同的入口起点
module.exports = {
   
   
  entry: './path/to/my/entry/file.js',
}

输出(output)：告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。

// 输出文件的值默认是./dist/main.js，生成文件默认放置在 ./dist 文件夹中
// output属性： path，filename
const path = require('path')
module.exports = {
   
   
  entry: './path/to/my/entry/file.js',
  output: {
   
   
    path: path.resolve(__dirname, 'dist'), // bundle的文件地址
    filename: 'my-first-webpack.bundle.js', // bundle的文件名称
  },
};

loader：webpack 只能理解 JavaScript 和 JSON 文件，loader 让 webpack 能够处理其他类型的文件，并将他们转化为模块。

// loader属性： test，use
module.exports = {
   
    
  module: {
   
   
    rules: [
    {
   
    test: /\.txt$/,  // 识别出哪些文件会被转换。
      use: 'raw-loader'  // 定义出在进行转换时，应该使用哪个 loader。
     }],
  }
}

插件(plugin)：打包优化，资源管理

// require引用 => 添加到plugins中 => 使用new创建插件实例
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 module.exports = {
   
    
  plugins: [new HtmlWebpackPlugin({
   
    template: './src/index.html' })],
}

模式(mode)：development, production 或 none 之中的一个，来设置 mode 参数

module.exports = {
   
   
  mode: 'production',
}

浏览器兼容性(browser compatibility)：Webpack 支持所有符合 ES5 标准的浏览器
环境(environment)

webpack基本配置

拆分配置和merge
启动本地服务
处理es6：使用babel-loder
处理样式：使用什么loder
处理图片
模块化

webpack高级配置

基本配置只能做demo，不能做线上项目

多入口
抽离css文件
抽离公共代码：第三方模块单独拆分出去，公共引用部分拆分出去
懒加载
处理jsx
处理vue

webpack性能优化

优化产出的代码，产品性能
优化打包构建速度-开发体验和效率

主要有两方面，首先从优化打包构建速度来说，有优化babel-loader，babel编译es6到es5是消耗比较多的，ignorePlugin避免一些东西的插件，noparse不去管哪些，happypack多进程打包工具，parallelUglifyPlugin开启多进程进行一个代码压缩，还有就是自动刷新，热更新（自动刷新的升级版），DllPlugin针对比较大的第三方插件，不必每次都对第三方插件进行打包，事先把第三方库打包好之后，之后打包直接从dll里面引，