webpack安装:
- npm init -y #初始化项目
- npm i webpack webpack-cli -g #在全局环境下安装webpack打包工具
- npm i webpack webpack-cli #在项目下安装webpack
/**
* 采用commonjs的模块处理方式
* 1. loader: 下载 可以直接使用
* 2. plugin: 下载 引入才可以使用
*/
const { resolve } = require("path");
// 引入处理HTML文件的处理插件(事先需要安装)
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 引入用于抽取css样式成单独文件的插件(事先需要安装)
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 设置nodeJS环境变量, 是css兼容性处理从插件能选择使用指定环境(如果设置为development则为开发环境，如果没有设置则为生成环境)
process.env.NODE_ENV = "development";
/**
* webpack五个核心概念，分别对应5个不同的功能属性
* 1.entry: 入口文件
* 2.output: 输出位置
* - filename: 文件名
* - path: 打包好后的文件放在的绝对路径位置
* 3.module: loader规则工具
* 4.plugins: 插件
* 5.mode: 模式
* - development 开发模式
* - production 生成环境模式
*/
module.exports = {
entry: "./src/index.js",
output: {
filename: "built.js",
path: resolve(__dirname, "build")
},
module: {
rules:[
{
test: /\.css$/,
use:[
// "style-loader", // 创建style标签，将样式引入
MiniCssExtractPlugin.loader, // 使用该loader取代style-loader,作用: 提取css成单独文件
"css-loader" // 将css文件整合js文件中
]
},
{
test: /\.less$/,
use:[
// "style-loader", // 创建style标签，将样式引入
MiniCssExtractPlugin.loader, // 使用该loader取代style-loader,作用: 提取css成单独文件
"css-loader", // 将css文件整合js文件中
/* css兼容性处理: 使用postcss --> 需要postcss-loader和postcss-preset-env 依赖包
使postcss找到package.json中的browerslist属性的配置，通过配置来加载指定的css兼容性样式
"browserslist": { // github上有详细的参数，可以去GitHub上翻翻
"development": [ // 开发模式下兼容chrome、firefox、safari最后版本的浏览器
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [ // 生产环境下，不需要兼容那些被淘汰的
// 默认使用的该生产环境的配置， 与下面的mode没啥关系
// 所以如果想使用开发环境下的css兼容性模式，则需要设置node环境变量: process.env.NODE_ENV = developement
">0.2%",
"not dead",
"not op_mini all"
]
}
*/
{
loader: "postcss-loader",
options: {
ident: "postcss",
plugins: ()=>[ // 返回的是插件列表, 得是一个数组
// 使用postcss插件
require("postcss-preset-env")()
]
}
},
"less-loader" // 将less语法编译成css
]
},
{
test: /\.(png|gif|jpg|jpeg)$/,
loader: 'url-loader', // url-loader 依赖file-loader模块，所以安装时也需要安装file-loader
options: {
limit: 8 * 1024, // 当图片大小小于8kb的时候，将图片进行base64编码进行打包
name: '[hash:10].[ext]', // name属性用于处理打包后的img图片的文件命名格式: 取hash前十位，以原来文件格式结尾
esModule: false // 默认使用es6引入模块方式解析
}
},
{
test: /\.html$/,
// 用于处理html文件中img路径的loader
// 默认该loader使用commonjs处理html文件中的资源引入路径
// 所以需要让url-loader关闭es模块(即options中加入esModule:false，让url-loader使用commonjs去解析路径)
loader: 'html-loader'
},
{
// 可使用排除方式来加入其它资源文件
exclude: /\.(css|html|less|js|png|jpeg|jpg|gif)$/,
loader: 'file-loader', // 该loader因为在url-loader安装时已经安装
options: {
name: '[hash:10].[ext]'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html" // 使用src/index.html作为html模板页面
// filename: "index.html" // 打包时的html文件名
}),
new MiniCssExtractPlugin({
filename: "css/build.css" // 将输出的文件名放置在css目录下，并重命名为build.css
})
],
mode: 'development',
devServer: { // 执行需要webpack-dev-server依赖，所以需要安装后才能使用: npx webpack-dev-server
// 这里暂时有个问题: JSON文件引入貌似会出问题，明天解决……
// 执行热部署的位置路径
contentBase: resolve(__dirname, 'build'),
// 执行是否使用gzip压缩
compress: true,
// 热部署的端口号
port: 3000,
open: true // 第一次启动，自动打开浏览器
}
}
