webpack基础概念

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

webpack在4.x的版本里支持零配置，什么是零配置，也就是不需要额外使用配置文件（webpack.config.js）就可以执行简单的构建任务

基本配置

const path = require('path')
module.exports = {
    // 默认入口是entry，指定"./src/index.js"为入口
    entry: './src/index.js',
    // 默认输出目录output："./dist"
    output: {
        path: path.resolve(__dirname, './dist'),
        filename:'main.js'
    }
}

webpack.config.js

webpack是可配置的模块打包工具，通过修改webpack配置文件webpack.config.js对webpack进行配置
因此，如果想使用配置文件对webpack进行配置，就需要新建一个webpack.config.js，webpack执行时，会根据webpack.config.js的配置进行构建

基础概念

1. entry入口：指定webpack执行构建任务入口，一般为项目入口文件
2. output输出：指定bundles输出位置，以及如何命名这些文件，默认值为"./dist"
3. module模块：webpack基于Node.js，项目中任何文件都可以看成module
4. loader模块转化器：用于对模块的源代码进行转换
5. plugin插件：作用于webpack整个构建周期，目的在于解决loader无法解决的任务
6. bundle文件：最终打包完成的文件，比如默认配置下输出的"./dist/main.js"文件
7. mode模式：通过配置mode=development或者mode=production来指定开发环境打包还是生产环境打包，它们区别比如生产环境代码需要压缩，图片需要优化，webpack默认mode=production，也就是默认为生产环境，如果不设置，会有警告