前端工程化
工程化是系统化、模块化、规范化的过程。
工程化主要解决“如何提高整个系统生产效率”的问题。
前端模块化
非模块化代码的不足
1、协同开发不方便，一不小心就污染了别人的代码；
2、Javascript之间无法相互引用；
3、不方便分配工作；
4、引入别的模块用script,需要特别注意顺序；
模块化规范
COMMONJS
AMD/CMD/UMD
ES6 Module
webpack支持的规范：COMMONJS AMD ES6 Module
webpack主要功能
1、编译，包括Javascript的编译，css的编译；
2、文件的压缩，打包，合并，公共模块提取等；
3、图片等资源的处理如压缩，合并雪碧图等；
4、Tree-shaking等优化Javascript工具；
5、webpack-dev-server, Eslint,热更新等帮助开发的工具；
配置文件重点
Webpack 核心概念
Entry ：入口，Webpack 执行构建的第一步将从 entry 开始，可抽象成输入；
Module：模块，配置处理模块的规则；在 Webpack 里一切皆模块，一个模块对应一个文件；Webpack 会从配置的 Entry 开始递归找出所有依赖的模块；
Loader
模块转换器，用于将模块的原内容按照需求转换成新内容；
loader是webpack的编译方法;
webpack自身只能处理javascript,所以对于别的资源需要用loader
webpack自身只能负责打包，相关的编译等操作，需要loader
loader本质是一个方法，使用时大多需要额外的安装
常用loader
1、css-loader、style-loader等css处理loader；
2、url-loader、image-loader等图片字体文件等资源处理loader；
3、less-loader、sass-loader、babel-loader等编译loader；
除此之外还有很多语法糖loader,比如vue-loader ts-loader；
Resolve：配置寻找模块的规则；
Plugin
扩展插件，在 Webpack 构建流程中的特定时机会广播对应的事件，插件可以监听这些事情的发生，在特定的时机做对应的事情；
plugin是webpack的额外扩展：
1、一些插件式的额外功能由plugin定义，帮助webpack优化代码，提供功能；
2、plugin有的是webpack自带的，也有的是额外安装的；
常用plugin
1、commonsChunkPlugin(提取公共模块），uglifyisWebpackPlugin（压缩，无用代码删除）,PurifyCSS等优化文件体积的插件；
2、HtmlWebpackPlugin(将打包文件自动加入html），HotModuleReplacementPlugin(热加载、更新）等额外功能的插件；
Output：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果；
Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割；
配置详解
module.exports = {
// entry:'./app.js',
// entry:['./app.js','./app2.js'],
//这个比较常用
entry:{
app:'./app.js',
// app2:'./app2.js'
},
output:{
//path是一个绝对路径，如果没有path，则path默认为__dirname+dist
path:__dirname+'/src/bundle',
// filename:'bundle.js'
//name为entry中的指向key值,hash为默认随机字符串，hash:4为截取前4个
filename:'[name].[hash:4].js'//app.hkgd.js
},
module: {
rules: [
{
test: /\.js$/,
exclude:'/node_modules/',
//use 是使用哪个loader来处理对应的文件
use:{
loader:'babel-loader',
}
}
]
},
plugins:[
new webpack.DefinePlugin({
'process.env':require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin()
]
}
