webpack成长指北第5章---webpack的基础配置

简介: webpack成长指北第5章---webpack的基础配置


entry

webpack的entry指定webpack打包项目时的入口文件(即指定哪个文件为起点进行打包)

entry写法主要有下列几种:

  • 第一种
    webpack.config.js
const path = require('path'); // 由于webpack无法直接操作文件夹,所以需要引入node的path模块
module.exports = {
  entry: './index.js', // 指定当前目录的index.js为打包的入口文件
  output: {
    filename: 'main.js', // 打包后输出的打包文件的文件名
    path: path.resolve(__dirname, 'dist'), // 指定打包后输出的打包文件在当前webpack.config.js所在文件夹的绝对路径的dist文件夹下
  }
}
  • 第二种
    webpack.config.js
const path = require('path'); // 由于webpack无法直接操作文件夹,所以需要引入node的path模块
module.exports = {
  entry: {
  main: './index.js', // 指定当前目录的index.js为打包的入口文件
                      // 实际上是 entry: './index.js' 的具体写法,main为打包的Chunk Name
  },
  output: {
    filename: 'main.js', // 打包后输出的打包文件的文件名
    path: path.resolve(__dirname, 'dist'), // 指定打包后输出的打包文件在当前webpack.config.js所在文件夹的绝对路径的dist文件夹下
  }
}
  • 第三种(如果要设置多入口文件的情况)
    webpack.config.js
const path = require('path'); // 由于webpack无法直接操作文件夹,所以需要引入node的path模块
module.exports = {
  entry: {
    main: './index.js', // 指定当前目录的index.js为打包的入口文件
                       // 实际上是 entry: './index.js' 的具体写法,main为打包的Chunk Name
    sub: './sub.js', // 可以有多个入口文件,指定当前目录的sub.js为打包的入口文件
  },
  output: {
    filename: '[name].js', // 打包后输出的打包文件的文件名,写成[name]的形式,生成的文件名会和entry的Chunk Name同名
    path: path.resolve(__dirname, 'dist'), // 指定打包后输出的打包文件在当前webpack.config.js所在文件夹的绝对路径的dist文件夹下
  }
}

output

output指定打包后生成的打包文件和打包文件存储路径

  • output 的filename是打包后生成的文件名
  • output的path是打包后生成的文件所放置的位置(必须是绝对路径,所以要引入node的path依赖包,_dirname是webpack.config.js所在的绝对路径,存储路径就是_dirname+自定义路径)
  • publicPath是对页面引入资源的补充,比如img标签引入或者css引入等,一般来说,如果打包本地资源报404,很有可能就是publicPath没设置正确导致的
  • 实例及注释
const path = require('path'); // 由于webpack无法直接操作文件夹,所以需要引入node的path模块
module.exports = {
  entry: {
    main: './index.js', // 指定当前目录的index.js为打包的入口文件
                        // 实际上是 entry: './index.js' 的具体写法,main为打包的Chunk Name
  },
  output: {
    filename: '[name].js', // 打包后输出的打包文件的文件名,根据entry的chunk name作为输出文件名(如果entry有多个入口文件时必须用占位符这样设置output.filename)
    path: path.resolve(__dirname, 'dist'), // 指定打包后输出的打包文件在当前webpack.config.js所在文件夹的绝对路径的dist文件夹下
                                           // path值必须是绝对路径 ,所以引入path包,__dirname代表当前webpack.config.js所在文件夹的绝对路径
                                           // 整体路径为第一个参数+第二个参数,即__dirname + dist
                                           // 是所有输出文件的目标路径(物理路径, 存储路径);                  
    publicPath: '/'   // (url 相对于 HTML 页面所在文件夹的绝对路径 + 值)给output配置全局的publicPath,
                          // 这样各个loader打包出来的文件发布路径(引用地址)就是此全局publicPath + loader的options.outputPath
                          // (文件引用路径就是看这个)
                          // 是对页面引入资源的补充,比如img标签引入或者css引入等.
                          // 千万不能设错,应该观察文件和HTML页面的存储地址位置,进行设置,否则引用时地址会错误,找不到文件
    // publicPath: 'http://www.cdn.cn' // 如果,想把打包后生成的index.html作为入口文件,而打包生成的js放到服务器上如http://www.cdn.cn,那么webpack就应该这样设置
  }
}

备注:entry和output实际上还有很多配置,这里只阐述基本配置,如有需要,可自行查阅官网获取更多配置

mode

打包模式,值有development(开发环境)、production(生产环境)

development环境下,代码默认不压缩,production环境下,代码默认压缩

const path = require('path'); // 由于webpack无法直接操作文件夹,所以需要引入node的path模块
  
  module.exports = {
    entry: {
      main: './index.js', // 指定当前目录的index.js为打包的入口文件
                          // 实际上是 entry: './index.js' 的具体写法,main为打包的Chunk Name
    },
    mode: 'development', // mode  指定打包模式(development(不会被压缩),production(这个模式的话代码会被压缩))
                           // development默认配置了sourcemap
                           // development默认无tree shaking配置,需要额外配置
    output: {
      filename: '[name].js', // 打包后输出的打包文件的文件名,根据entry的chunk name作为输出文件名(如果entry有多个入口文件时必须用占位符这样设置output.filename)
      path: path.resolve(__dirname, 'dist'), // 指定打包后输出的打包文件在当前webpack.config.js所在文件夹的绝对路径的dist文件夹下
                                             // path值必须是绝对路径 ,所以引入path包,__dirname代表当前webpack.config.js所在文件夹的绝对路径
                                             // 整体路径为第一个参数+第二个参数,即__dirname + dist
                                             // 是所有输出文件的目标路径(物理路径, 存储路径);                  
      publicPath: '/'   // (url 相对于 HTML 页面所在文件夹的绝对路径 + 值)给output配置全局的publicPath,
                            // 这样各个loader打包出来的文件发布路径(引用地址)就是此全局publicPath + loader的options.outputPath
                            // (文件引用路径就是看这个)
                            // 是对页面引入资源的补充,比如img标签引入或者css引入等.
                            // 千万不能设错,应该观察文件和HTML页面的存储地址位置,进行设置,否则引用时地址会错误,找不到文件
      // publicPath: 'http://www.cdn.cn' // 如果,想把打包后生成的index.html作为入口文件,而打包生成的js放到服务器上如http://www.cdn.cn,那么webpack就应该这样设置
    }
  }

development模式打包生成的main.js(代码未压缩)

production模式打包生成的main.js(代码被压缩)

目录
相关文章
|
8月前
|
JavaScript 测试技术
Webpack - Vue 配置开发环境与正式环境
Webpack - Vue 配置开发环境与正式环境
96 1
|
12天前
|
前端开发
【专栏】`webpack` 的 `DefinePlugin` 插件用于在编译时动态定义全局变量,实现环境变量差异化、配置参数动态化和条件编译
【4月更文挑战第29天】`webpack` 的 `DefinePlugin` 插件用于在编译时动态定义全局变量,实现环境变量差异化、配置参数动态化和条件编译。通过配置键值对,如 `ENV: JSON.stringify(process.env.NODE_ENV)`,可以在代码中根据环境执行相应逻辑。实际应用包括动态加载资源、动态配置接口地址和条件编译优化代码。注意变量定义的合法性和避免覆盖,解决变量未定义或值错误的问题,以提升开发效率和项目质量。
|
12天前
|
缓存 JavaScript 前端开发
webpack学习笔记--基本配置
webpack学习笔记--基本配置
|
12天前
|
JavaScript 前端开发
构建工具:配置Webpack打包Vue项目
【4月更文挑战第24天】本文介绍了如何配置Webpack来打包Vue项目。首先,Webpack作为模块打包器处理依赖并打包成可执行文件。接着,通过安装Node.js和npm,创建Vue项目,进入项目目录并配置Webpack的入口、输出、加载器和插件。最后,运行构建命令完成打包。理解Webpack基础并按需配置,能优化前端项目构建和开发体验。
|
12天前
|
人工智能 移动开发 前端开发
【利用AI让知识体系化】Webpack 相关配置技巧(三)
【利用AI让知识体系化】Webpack 相关配置技巧
|
12天前
|
人工智能 缓存 JavaScript
【利用AI让知识体系化】Webpack 相关配置技巧(二)
【利用AI让知识体系化】Webpack 相关配置技巧
|
12天前
|
人工智能 前端开发 JavaScript
【利用AI让知识体系化】Webpack 相关配置技巧(一)
【利用AI让知识体系化】Webpack 相关配置技巧
|
12天前
|
前端开发 JavaScript 开发者
webpack打包机制,构建过程和配置
webpack打包机制,构建过程和配置
21 0
|
12天前
|
JavaScript 应用服务中间件 nginx
nginx vue2+webpack 和 vue3+vite 配置二级目录访问
nginx vue2+webpack 和 vue3+vite 配置二级目录访问
151 0
|
12天前
|
JSON JavaScript 前端开发
Webpack的ts的配置详细教程
Webpack的ts的配置详细教程
58 0