webpack资源输入输出

webpack资源输入输出模块

主要学习webpack打包工具的来源以及产出，相关资源文件配置

资源处理流程

指定入口文件（entry）一般是默认是src下面的main.js或者index.js，将存在依赖关系的包模块打包成为一个chunk（代码块），一个chunk可能包含多个依赖的模块文件，webpack将依赖模块进行打包封装形成chunk，根据配置不同形成多个chunk。

由chunk资源打包的最终产物名为bundle，一般产出为dist/bundle.js最后引入到html文件中。

入口文件可以定义多个，比如src/index.js与src/lib.js 打包之后形成dist/index.js,dist/lib.js等等
一个入口也可能形成多个chunk

入口配置

通过context以及entry两个配置项来配置资源入口，如入口文件为：根/src/scripts/index.js

module.exports = {
   
	context:path.join(__dirname,'./src'),
	entry:'./scripts/index.js'
}

context只能为字符串，而entry可以配置为字符串，数组，对象，函数。

比如配置为数组：

const path = require('path');
const htmlPlugin = require('html-webpack-plugin');

module.exports = {
   
  entry: ['babel-polyfill', './src/index.js'],
  output: {
    filename: 'bundle.js' },
  mode: 'development',
  plugins: [new htmlPlugin({
    title: path.basename(__dirname) })]