# Webpack ## entry 用来写入入口文件，作为整个依赖关系的根。 ## output 用来定义打包的输出方式。分为filename与path两个参数。有多个入口文件时，需要使用占位符来保证输出的唯一性。 ~~~ output: { filename: '[name].js', path: path.resolve('./build') } ~~~ ## loader 实现对不同文件格式的处理，转换这些文件，使他们可以被添加到依赖中。在loader中，每个对象是一个对应处理的模块。 > 常用loader有 css-loader style-loader babel-loader url-loader（url-loader作用在于，我们引入css img等资源时，路径是相对于html的，但是打包是可能会出现路径错乱的问题，使用url-loader可以解决这个问题。） ~~~ { test: /\.s?css$/, // 使用正则匹配loader要处理的文件 use: 'style-loader', // 规定使用什么loader exclude: /(node_modules)|(unbabel)/, // 排除何种文件 } ~~~ ## plugin 不同于loader只对某个文件起作用，plugin对打包过程起作用。 ExtractTextPlugin:它会将入口中引用css文件，都打包都独立的css文件中，而不是内嵌在js打包文件中。 ## resolve 在resolve中设置alias属性，规定一些缩写名 # 步骤 1. 参数初始化 从配置文件 【webpack.config.js】和 shell 语句中读取与合并参数 2. 开始编译 初始化一个compiler对象 加载所有插件 执行对象的run方法开始编译 3. 确定入口文件 根据配置文件找到项目所有的入口文件 4. 编译模块 从入口开始 调用配置的loader对模块进行编译 【有一个递归寻找依赖模块的流程】 模块编译完成后 得到模块被转化后的最后内容以及他们之间的依赖关系 5. 资源输出 根据入口文件和模块之间的依赖关系 组成chunk文件 【一个chunk可能包含多个模块】每一个chunk将会被转化成一个单独的文件加入输出列表中 6. 输出 根据配置的输出参数 【路径和文件名】将输出内容写入文件系统