1.什么是前端工程化
前端工程化是指将前端开发流程规范化，标准化，包括开发流程，技术选型，代码规范，构建发布，用于提升前端工程师的开发效率和代码质量
2. 为什么要前端工程化
复杂度高：多功能、多状态、多页面、多系统
规模大： 团队开发、多人协作、代码质量
要求高： 页面性能优化（cdn/异步加载/请求合并/css兼容性、单页面应用、服务端渲染）
3.webpack核心概念
入口 -- 输出 -- loader -- 插件 -- 模式/兼容性
简单的webpack配置
1.建立一个空的项目--执行 -npm init -y （全部使用默认配置）会生成一个package.json文件
2.两种安装webpack方式
局部安装
npm install webpack webpack-cli --save
yarn add webpack webpack-cli -D
全局安装
npm install webpack -g
yarn global add webpack webpack-cli
module.exports = {
mode: 'production',
entry: './src/index.js', //入口
output: { //输出
filename: 'bundle.js',
path: path.join(__dirname,'./dist') //node的path模块，使用绝对路径nodejs的全局变量__dirname
},
module: {
rules: [
{ test: /\.(scss | sass)$/, use: ['style-loader','css-loader','sass-loader'] },
]
},
devServer: {
contentBase: './dist',
hot: true
},
// 插件
plugins: [
new HtmlWebpackPlugin(
{
filename: 'index.html',
template: 'template.html'
}
),
new webpack.HotModuleReplacementPlugin()
],
}
4. webpack 如何调试
1."webpack:debug": "node --inspect-brk ./node_modules/.bin/webpack --inline --progress"
