what is webpack
- webpack is a front-end resource building attack, a static module bundler
Five core concepts of webpack
- entry entry file
- output output indication (where the output goes)
- loader lets webpack process non-javaScript files
- plugins plugin, optimized packaging, compression
- mode configuration file development development environment production production environment
Initialize the project
npm init
Install webpack
npm i webpack webpackcli -D
webpack compatibility issues
- Install version 4 of webpack and version 3 of webpack-cli
npm i webpack@4 webpackcli@3 -D
run webpack
- development environment
webpack ./src/index.js -o ./build/build.js --mode=development
- Production Environment
webpack ./src/index.js -o ./build/build.js --mode=production
webpack can handle js/json resources, but not css/img resources
webpack packaging resources
The difference between built-in middleware path.join and path.resolve
- join is to connect each path segment together, resolve takes '/' as the root directory
- When esolve passes in a non/path, it will automatically add the current directory to form an absolute path, and join is only used for path splicing
css\less resource packaging
Recommended version of each package
Packaging command webpack
Create 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' //开发模式
}
Package html resources
Recommended version of each package
/*
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'
})
],
Package image resources
The package used and the corresponding version
Note: close esModule, otherwise the file-loader in img does not need to be imported
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',
}
Package other resources
webpack.config.js
module:{
.......
// 打包其他资源（除了html/js/css资源）
{
exclude: /\.(css|js|html)$/,
loader: 'file-loader',
options: {
name:'[hash:10].[ext]'
}
}
]
},
Use of webpack-dev-server
package download
module.exports ={
......
// 开发服务器 devServer:用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
// 特点：没有输出只会在内存中打包，不会有任何输出
// 启动devServer指令为： [email protected]
devServer:{
contentBase: resolve(__dirname,'build'),
// 启动gzip压缩
compress:true,
// 使用localhost:3000进行查看
port:'3000',
// 自动打开浏览器
open:true,
}
}
Full configuration of the development environment
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'
}