因为index.html 文件已经写死了,js都写死了
html-webpack-plugin
安装
npm install html-webpack-plugin --save-dev
使用
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
mode:'production',
entry:'./src/index.js',
output:{
filename:'main.js',
path:__dirname+'/dist'
},
plugins:[
new htmlWebpackPlugin({
template:'./src/index.html'
})
]
}
# 项目mypack目录机构如下
src
header.js
index.html
index.js
package.js
webpack.config.js
下面我再来介绍几个参数,以及它的结果。
filename: ‘index.html’ 默认情况下生成的 html 文件叫 index.html,但有时候你不想叫这个名字,可以改。
filename:'youIndex.html'
minify压缩 去空格
minify: {
collapseWhitespace: true,
},
处理css
css-loader 分析css关系-合并一个css(import)
style-loader 把css挂载到head里面
mini-css-extract-plugin 把css抽取到单独文件
optimize-css-assets-webpack-plugin用于压缩css文件,它将在webpack构建期间搜索css资源,并将优化/最小化css
less less-loader 处理less文件
npm install css-loader style-loader mini-css-extract-plugin optimize-css-assets-webpack-plugin -D
index.js
import {header} from './header.js'
import './css/style.css'
import './css/style.less'
document.body.append(header);
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports={
optimization: {
minimizer: [ new OptimizeCSSAssetsPlugin({})],
},
mode:'production',
entry:'./src/index.js',
output:{
filename:'main.js',
path:__dirname+'/dist'
},
module:{
rules:[
{
test:/\.css$/,
use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader']
},
{
test:/\.less$/,
use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader','less-loader']
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'style.css',
}),
]
}
webpack-dev-server
webpack-dev-server 本地服务
clean-webpack-plugin 清理dist目录
安装
npm install clean-webpack-plugin webpack-dev-server -D
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports={
devServer: {
contentBase: './dist',
},
optimization: {
minimizer: [ new OptimizeCSSAssetsPlugin({})],
},
// mode:'production',
entry:'./src/index.js',
output:{
filename:'main-[hash].js',
path:__dirname+'/dist'
},
module:{
rules:[
{
test:/\.css$/,
use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader']
},
{
test:/\.less$/,
use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader','less-loader']
}
]
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template:'./src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'style.css',
}),
]
}