一. 简介
下面是webpack5.0的开发的常见配置
二. 安装
npm init -y
// 基础webpack
npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D
// 简单执行打包
npx webpack
npm install sass-loader sass style-loader css-loader -D
// 假如要使用postcss
npm i postcss-loader postcss -D
// 使用autoprefixer
npm install autoprefixer -D
// 使用es6等先进语法
npm install -D babel-loader @babel/core @babel/preset-env
三. 开发环境配置
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口
entry: {
index: './src/index.js',
},
// 出口
output: {
filename: 'script/[name].bundle.js',
path: path.resolve(__dirname, '../dist'), // 輸出目录
clean: true
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html', // 引用的模板
filename: 'index.html',
inject: 'body' // 资源引入的位置
}),
],
mode: 'development', // 开发模式
devtool: 'cheap-module-source-map', // source-map
devServer: {
static: './dist',// 实际上执行运行npx webpack serve, 开发环境运行的内容依靠内存的，可不要
},
module: {
rules: [
{ // 所有 .png 文件都将被发送到输出目录，并且其路径将被注入到 bundle 中
test: /\.(png|svg)/,
type: 'asset/resource',
generator: {
filename: 'static/[hash][ext]' // 表示dist目录下生成资源目录
}
},
// {
// test: /\.svg/,
// type: 'asset/source' // 导出资源的源代码
// },
{
test: /\.(css|scss)$/,
use: [
'style-loader', // 创建 <style></style> 标签，将 JS 字符串写入，添加到 DOM 中
'css-loader', // 加载css
{// 使用 PostCSS 处理 CSS 使用 PostCSS 处理 CSS, 比如使用先进的css，但内部转化成现代浏览器理解的css,或者加上厂商前缀
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'autoprefixer',
{
// 选项
},
],
],
},
},
},
'sass-loader' // 将 Sass 编译成 CSS
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
generator: {
filename: 'static/iconfont/[hash][ext]' // 表示dist目录下生成资源目录
}
},
{
test: /\.js$/,
exclude: /node_modules/, // 排除node_modules目录
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
optimization: {
splitChunks: { // 将第三方的包打入一个文件中，避免多次引入同一个第三方库
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},
}