1.webpack概述
webpack是一个流行的前端项目构建工具(打包工具),可解决当前web开发中所面临的困境。
webpack提供了友好的模块化支持,以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能。
2.webpack的基本使用
(1)创建项目的过程
创建列表隔行变色项目
(2)在项目中安装和配置webpack
develpment是对代码不进行压缩,比压缩代码production转换时间短。开发阶段尽量将mode设置为development,上线的时候指定为production。
(3)配置打包的入口与出口
如果要修改webpack配置打包的入口与出口,要在webpack.config.js文件中的配置信息新增以下内容:
const path = require('path')
module.export = {
mode: 'development',
// 上线时要将development改为production
entry: path.join(__dirname,'./src/index.js'),//输入文件存放路径
output: {
path: path.join(__dirname,'./dist/'),//输出文件存放路径
filename: 'bundle.js'//输出文件的名称
}
}
(4)配置webpack的自动打包功能
一按保存就会自动打包
(5)配置html-webpack-plugin生成预览页面
配置生成预览页面
webpack.config.js:
const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebPackPlugin({
template:'./src/index.html',
filename:'index.html'
})
module.exports = {
mode: 'development',
// 上线时要将development改为production
entry: path.join(__dirname,'./src/index.js'),//输入文件存放路径
output: {
path: path.join(__dirname,'./dist/'),//输出文件存放路径
filename: 'bundle.js'//输出文件的名称
},
plugins:[htmlPlugin]
}
(6)配置自动打包相关的参数