前言
阅读之前首先我们要有以下疑问
- webpack是什么
- 为什么要使用webpack
webpack核心
webpack是一个javascript的静态模块打包器，因为本身只能处理js，json文件，有了loader概念，使用loader可以处理css，html等等一些文件类型。我们想要更多的功能，更广的任务处理，有了plugins这个概念，plugins可以让我们有各种各样的功能。开发时，有生产环境和测试环境区分，有了mode这个概念，来区分环境。
我们为什么要使用webpack那？前端之前的开发模式，通过script标签来引入js文件，js之间没有强依赖关系，如果我们在当前的js文件引用其他js文件的变量或方法，那么被引用的js文件顺序一定要在当前使用的js文件之前先加载，随着项目的越来越大，依赖关系越来越复杂，模块化的概念可以让js文件之间相互引用，不用担心排列顺序。浏览器如果加载很多的js文件，会影响页面的加载速度，webpack可以把多个关联的文件打包在一起，减少文件的数量，提升加载速度。
entry
入口告诉webpack从哪个模块作为构建内部依赖图的开始,可以配置多个入口，webpack5如果不配置默认为src/index文件
module.exports = { entry: {app: './src/index.tsx',b: './src/app.tsx',
},
};复制代码output
output属性告诉webpack在哪里输出它创建的bundle，如何命名这些文件，webpack5可以不进行配置，会默认输出到dist目录下
module.exports = { output: {filename: 'js/[chunkhash:10].bundle.js',path: resolve(__dirname, 'dist'),
},
};复制代码loader
loader能够让webpack处理那些非javascript文件，把它们转换成webpack能够处理的模块，然后利用webpack打包的能力对他们进行处理，loader需要安装，例如css-loader
module.exports = { module: {rules: [
{// 剥离css代码，配置了MinCssExtractPlugin.loader，就不需要style-loadertest: /\.css$/,
use: [{ loader: MinCssExtractPlugin.loader }, { loader: 'css-loader' }],include: resolve(__dirname, 'src'),exclude: /node_modules/,
},
{test: /\.html$/,
loader: 'html-loader',
},
],
},
};复制代码plugins
插件可以执行范围更广的任务，例如:压缩，去除空格，
module.exports = { plugins: [ // 会自动创建一个html文件，把webpack打包后的文件自动插入到html文件中new HtmlWebpackPlugin({ template: 'public/index.html' }),
}),
],
};复制代码mode
通过选择生产环境或者开发环境来使用webpack内置的优化，也可以做环境区分
module.exports = { mode: 'development', // 选择开发环境};
};复制代码总结
- webpack可以处理模块之间的相互依赖关系，把多个相互关联的文件打包成一个，减少请求次数
- entry入口告诉webpack从那个模块开始构建依赖图
- output告诉webpack输出到哪里，输出文件命名
- loader 处理webpack不能识别的文件，转化成webpack可以处理的内容
- plugins 执行范围更广的任务，
- mode 选用开发环境和生产环境
webpack的基本使用使用以上核心的功能，在其上面添加不同的功能，配置loader，配置plugins，来丰富webpack的功能
