参考
配置
1.创建本地项目webpack-demo
mkdir webpack-demo
cd webpack-demo
2.在webpack-demo
的根目录下创建package.json
文件
npm init -y
- 安装
webpack
依赖包
npm i webpack webpack-cli webpack-dev-server --save-dev
模块说明:
-
webpack
webpack
核心 -
webpack-cli
webpack
的脚手架(启动器) -
webpack-dev-server
开发环境下用于实时加载依赖
4.修改package.json
文件的scripts
属性值,进行打包资源的配置
"scripts": {
"dev": "webpack-dev-server --open --mode development",
"build": "webpack --mode production"
},
5.安装相关的loader
npm install url-loader --save-dev
6.在webpack.config.js
中配置
const path = require('path');
// 显示进程的完成进度
var ProgressBarPlugin = require('progress-bar-webpack-plugin');
// 设置进度字体颜色
const chalk = require('chalk');
// 以树图的方式展示打包后的文件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// 输出html
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 分离css代码
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 清空dist文件夹
const {
CleanWebpackPlugin
} = require('clean-webpack-plugin');
module.exports = {
mode: 'production',
entry: {
app: './src/app.js'
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].[hash].min.js'
},
module: {
rules: [{
test: /\.jsx?$/,
use: [{
loader: 'babel-loader'
}]
},
{
test: /\.css$/,
use: [
// {
// loader: 'style-loader'
// },
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
}
]
},
{
test: /\.less$/,
use: [
// {
// loader: 'style-loader'
// },
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},
{
loader: 'less-loader'
}
]
},
{
test: /\.scss$/,
use: [
// {
// loader: 'style-loader'
// },
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.(jpg|png|jpe?g|gif|svg)(\?.*)?$/i,
use: [
{
loader: 'url-loader',
options: {
outputPath: 'images/',// 输出目录
name(file) {// 输出名称
return '[hansh].[ext]'
},
limit: 5*1024
}
}
]
},
{
test: /\.(eot|woff2?|ttf|svg)$/,
use: [{
loader: 'url-loader',
options: {
name: '[name]-[hash:5].min.[ext]',
limit: 5000,
publicPath: '../static/fonts/',
outputPath: 'fonts/'
}
}]
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack Study Demo',
filename: 'index.html', //指定生成的HTML文件名
template: path.join(__dirname, '../public/index.html') // 指定模板路径
}),
new MiniCssExtractPlugin({
filename: '[name].css',// 分离后的文件名
chunkFilename: '[id].css',//
ignoreOrder: false
}),
new CleanWebpackPlugin(),
new ProgressBarPlugin({
format: chalk.green('Progressing') + '[:bar]' + chalk.green(':percent') + '(:elapsed seconds)',
clear: false
}),
new BundleAnalyzerPlugin()
]
}
网友评论