概念

webpack是一个打包模块的机制,把依赖的模块转化成可以代表这些包的静态文件

作用

• 打包
  • 可以把多个JavaScript文件打包成一个文件, 减少服务器压力和下载宽带
• 转换
  • 把扩展语言转换成普通的JavaScript语言,让浏览器识别更顺利运行
• 优化
  • 前端变的越来越复杂后,性能也会遇到各种问题,webpack肩负起优化和提升的责任

核心原理

• 一切皆模块
  • js,css,image和html文件都可以视为模块,通过require加载
• 按需加载
  • Webpack使用许多特性来分割代码然后生成多个“bundle”文件，通过异步加载部分代码来实现按需加载功能

打包原理

• 识别入口文件, 分析代码, 获取模块依赖, 并且将代码打包为浏览器可以识别的代码
• 递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle

如何配置

• webpack.config.js

module.exports = {
// 配置打包选项  development开发环境
mode: 'development', // production 生产环境
// 指定入口文件：要打包的文件
entry: './src/js/index.js',
// 指定输出文件：打包之后的文件
output: {path: path.resolve(__dirname, 'dist'),filename: 'main.min.js'
},
// 配置资源的加载器 loader
module: {rules: [// 配置js的加载器（把ES6转化为ES3/5代码）{test: /\.jsx?$/,loader: 'babel-loader',//打包除这个文件之外的文件exclude: path.join(__dirname, './node_modules'),//打包包括的文件include: path.join(__dirname, './src')},// 配置css的加载器{// 匹配.css结尾的文件test: /\.css$/,// 配置css文件的加载器,处理顺序：从右向左use: ['style-loader', 'css-loader']},// 配置less的加载器{test: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader']}]
},
// 配置插件
plugins: [new CleanWebpackPlugin(),// 动态生成htmlnew HtmlWebpackPlugin({title: '测试标题',template: 'index.html'})
],
// 配置实时预览环境
devServer: {contentBase: path.join(__dirname, 'dist'),port: 5000
}
}复制代码

• mode配置环境是开发环境还是生产环境
• entry指定入口文件
• output指定输出文件
• module里的rules配置js的加载器
• modeule里的loader配置资源加载器
• plugins配置插件