webpack的基本概念以及相关配置

webpack

webpack中文文档

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

Webpack改变的是前端的开发模式，使前端可以进行模块化开发，基于ESModule。现在主流的框架开发都基于webpack。

entry

入口文件设置，只有和入口文件产生模块关联，最终才能被webpack打包

module.exports = {
    
    
  // 单入口写法
  entry: "./src/main.js",

  // 多入口数组写法
  entry: [
    "./src/main.js",
    "./src/index.js"
  ],

  // 多入口对象写法 用对象可以自定义未来输出的名字
  entry: {
    
    
    main: "./src/main.js",
    index: "./src/index.js"
  }
}

output

配置出口文件的格式以及文件名

module.exports = {
    
    
  entry: ...,
  output: {
    
    
    // 文件输出的名字 [name] [hash] [hash:10] 
    filename: "[name].[hash:8].js", 
    // output文件输出的路径 一般不用设置
    path: __dirname + '/dist'
  }
}

loader

webpack原生只能识别js模块，第三方开发了很多的loader，可以让webpack去识别成模块

plugin

webpack利用插件可以实现很多的功能

mode

• development
• production
• 自定义模式

一般我们在命令中设置模式

webpack --mode production
webpack --mode development

package.json

{
    
    
  "scripts": {
    
    
    "build": "webpack --mode 模式"
  }
}

也可以在配置文件中进行设置

module.exports = {
    
    
  mode: 'production',
  // 或者
  mode: 'development'
}

webpack需要配置文件

需要在我们项目的根目录创建配置文件webpack.config.js

module.exports = {
    
    
  mode: "",
  entry: "",
  output: "",
  module: {
    
    },
  plugins: []
}

webpack5中哪怕不写配置文件，也可以正常使用。