webpack
核心概念
entry:告诉wabpack要以哪个文件为起点打包
output:告诉wabpack打包后的资源 (bundles) 叫什么要输出到哪里去
loader: 让webpack能够处理非javascript文件
plugins:webpack插件:打包、优化、定义环境变量等等
mode:开发环境(development)和生产环境(production)
命令
npm i webpack webpack-cli -g //全局安装
npm i webpack webpack-cli -D //开发依赖
目录结构
src ---项目源代码目录
index.js ---入口文件
build ---打包后输出的目录
webpack.config.js ---webpack的配置文件
运行指令
开发环境
webpack ./src/index.js -o ./build/built.js --mode=development
webpack会以 ./src/index.js为入口文件开始打包,打包后输出到./build/built.js,整体的打包环境是开发环境
生产环境
webpack ./src/index.js -o ./build/built.js --mode=production
webpack.config.js
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//入口起点
entry: './src/index.js',
output: {
//输出的文件名
filename: 'built.js',
//输出的路径
path: resolve(__dirname, 'build')
},
// loader的配置
module: {
//详细的loader配置
rules: [
{
//匹配哪些文件
test: /\.css$/,
// use中的loader执行顺序:从右到左,从后到前依次执行
use: [
//创建一个style标签,将js中的样式资源插入进去,然后添加到header中
'style-loader',
//将css文件变成commonjs模块加载到js中,里面是样式字符串
'css-loader'
]
},
{
test: /\.less$/,
use: [
//创建一个style标签,将js中的样式资源插入进去,然后添加到header中
'style-loader',
//将css文件编译成commonjs模块加载到js中,里面是样式字符串
'css-loader',
//将less文件编译成css文件 //下载两个包,less-loader less
'less-loader'
]
},
{
//处理图片资源
test: /\.(jpg|png|gif|webp)$/,
loader: 'url-loader',
options: {
//图片小于8kb就会被base64处理
//优点:减少请求数量
//缺点:图片体积会更大
limit: 8 * 1024,
//问题:因为url-loader默认使用es6模块化解析,而html-loader引入图片是用的commonjs
//解析的时候会发生问题
//解决:关闭url-loader的es6模块化,使用commonjs解析
esModule: false,
//给图片进行重命名: hash:10取hash前10位,ext文件原来的扩展名
name: '[hash:10].[ext]'
}
},
{
//处理html中的图片资源
test: /\.html$/,
loader: 'html-loader',
options:{
esModule:false
}
},{
//处理其他资源
exclude:/\.(css|js|html)$/,
loader:'fail-loader'
}
]
},
//详细的plugins
plugins: [
new HtmlWebpackPlugin({
//复制./src/index.html文件并自动引入输出的所有资源
template: './src/index.html'
})
],
//模式
mode: 'development',
// mode:'production'
}