webpack是什么
- webpack是一种前端资源构建攻击，一个静态模块打包器
webpack的五个核心概念
- entry 入口文件
- output 输出指示(输出到哪里)
- loader 让webpack处理非javaScript文件
- plugins 插件，优化打包，压缩
- mode 配置文件 development 开发环境 production 生产环境
初始化项目
npm init
安装webpack
npm i webpack webpackcli -D
webpack兼容性问题
- 安装4版本的webpack和3版本的webpack-cli
npm i webpack@4 webpackcli@3 -D
运行webpack
- 开发环境
webpack ./src/index.js -o ./build/build.js --mode=development
- 生产环境
webpack ./src/index.js -o ./build/build.js --mode=production
webpack能处理js/json资源，不能处理css/img资源
webpack打包资源
内置中间件path.join和path.resolve的区别
- join是把各个path片段连接在一起， resolve把‘／’当成根目录
- esolve在传入非/路径时，会自动加上当前目录形成一个绝对路径，而join仅仅用于路径拼接
css\less资源打包
各个包版本推荐
打包命令webpack
创建webpack.config.js:
/*
webpack配置文件
作用：指示webpack干哪些活
所有的构建工具都是基于nodejs平台运行的 模块化采用的common.js
*/
const {
resolve} = require('path');
module.exports ={
// webpack配置
// 入口起点
entry: './src/index.js',
// 输出
output: {
filename: 'build.js',
path: resolve(__dirname, 'build')
},
// loader的配置
module: {
rules:[
// 详细配置loader配置
{
test: /\.css$/,
// use中的执行顺序 从下到上
// npm i [email protected] [email protected] -D
use: [
// 创建一个style标签将js中的样式资源插入进入
'style-loader',
// 将css文件变成common.js模块加载js中，里面内容是样式字符串
'css-loader'
]
},
{
test: /\.less$/,
use:[
'style-loader',
'css-loader',
// 将less加载成css文件 [email protected] less npm i [email protected]
'less-loader'
]
}
]
},
// 插件
plugins:[
],
// 模式
mode: 'development' //开发模式
}
打包html资源
各个包版本推荐
/*
loader 下载 使用
plugins 下载 引入 使用
*/
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins:[
// html-webpack-plugin [email protected]
// 作用：创建一个空的html文件 引入打包输出的所有资源（js/css）
new HtmlWebpackPlugin({
// 复制'./src/index.js' 并自动引入打包输出的所有资源
template : './src/index.html'
})
],
打包图片资源
用到的包以及对应的版本
注意点：关闭esModule 否则img中的不显示 file-loader不需要引入
webpack.config.js
const {
resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports ={
entry:'./src/index.js',
output:{
filename: 'build.js',
path: resolve(__dirname,'./build')
},
module: {
rules: [
{
test: /\.css$/,
use:[
'style-loader',
'css-loader',
]
},
{
// 下载两个包 [email protected] [email protected]
// 问题默认处理不了html中img的图片
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
// 图片大小小于8kb，就会被base64处理
// 优点：减少请求数量（减轻服务器压力）
// 缺点：图片体积会更大（文件速度会更慢）
limit: 8 * 1024,
// 问题：因为url-loader在默认使用es6模块化解析，而html-loader引入图片是commonjs
// 解析时会出现问题：[object Module]
// 解决：关闭url-loader的es6模块化，使用commonjs解析
esModule: false,
// [hash:10]取图片hash的前10位
// [ext]取文件原来扩展名
name: '[hash:10].[ext]'
}
},
{
test: /\.html$/,
// 处理html文件的img图片（负责引入img，从而被url-loader进行处理）[email protected] -D
loader: 'html-loader',
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html'
})
],
mode: 'development',
}
打包其他资源
webpack.config.js
module:{
.......
// 打包其他资源（除了html/js/css资源）
{
exclude: /\.(css|js|html)$/,
loader: 'file-loader',
options: {
name:'[hash:10].[ext]'
}
}
]
},
webpack-dev-server 的使用
包的下载
module.exports ={
......
// 开发服务器 devServer:用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
// 特点：没有输出只会在内存中打包，不会有任何输出
// 启动devServer指令为： [email protected]
devServer:{
contentBase: resolve(__dirname,'build'),
// 启动gzip压缩
compress:true,
// 使用localhost:3000进行查看
port:'3000',
// 自动打开浏览器
open:true,
}
}
开发环境的完整配置
webpack.config.js
// 开发环境的配置:能让代码运行即可
const {
resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'build.js',
path: resolve(__dirname,'build')
},
module: {
rules: [
{
test: /\.css$/,
use:[
'style-loader',
'css-loader',
]
},
{
test: /\.html$/,
loader: 'html-loader',
},
{
test: /\.(jpg||png||jpg)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
esModule: false,
name:'[hash:10].[ext]'
}
},
{
test: /\.less$/,
use:[
'style-loader',
'css-loader',
'less-loader'
]
},
{
exclude: /\.(html||css||js)/,
loader: 'file-loader',
options:{
name:'[hash:10].[ext]'
}
}
]
} ,
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html'
})
],
devServer:{
contentBase: resolve(__dirname,'build'),
compress: true,
port: 3000,
open: true
},
mode: 'development'
}