webpack学习第五步——plugin的使用
2020-02-14 本文已影响0人
Love小六六
—— webpack运行到某个时刻时，帮你处理一些事情
打包时删除之前的打包文件
- 安装clean-webpack-plugin
npm install clean-webpack-plugin -D
- 修改webpack.config.js
const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
mode: "development",
entry: "./src/index.js",
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: "url-loader",
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 2048
}
}
},{
test: /\.scss$/,
use: [
'style-loader',
{
loader: "css-loader",
options: {
importLoaders: 2 ,
modules: true
}
},
'sass-loader',
'postcss-loader'
]
}]
},
plugins: [
// 实例化CleanWebpackPlugin
new CleanWebpackPlugin()
],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
}
}
- webpack运行时会先删除build文件夹，再进行打包操作
使用html-webpack-plugin自动生成html文件
- 安装html-webpack-plugin
npm install html-webpack-plugin -D
- 修改webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
mode: "development",
entry: "./src/index.js",
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: "url-loader",
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 2048
}
}
},{
test: /\.scss$/,
use: [
'style-loader',
{
loader: "css-loader",
options: {
importLoaders: 2 ,
modules: true
}
},
'sass-loader',
'postcss-loader'
]
}]
},
// 实例化HtmlWebpackPlugin
plugins: [
new HtmlWebpackPlugin(),
new CleanWebpackPlugin()
],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
}
}
- 打包生成的build文件夹下会有index.html文件， html-webpack-plugin会在打包结束后自动生成html文件，并把打包生成的js自动引入到html中
设置html模板
- 我们可以自定义html模板，这样生成的html文件就会按照我们设置的模板来生成
- 创建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html 模板</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
- 修改webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: "development",
entry: "./src/index.js", // 路径相对于webpack.config.js
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: "url-loader",
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 2048
}
}
},{
test: /\.scss$/,
use: [
'style-loader',
{
loader: "css-loader",
options: {
importLoaders: 2 ,
modules: true
}
},
'sass-loader',
'postcss-loader'
]
}]
},
plugins: [
new HtmlWebpackPlugin({
// 设置生成的html文件模板
template: 'src/index.html'
}),
new CleanWebpackPlugin()
],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
}
}
- 打包后生成的index.html文件和模板文件一致，并且自动引入了bundle.js文件
html引入线上的js文件资源
- 修改webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
mode: "development",
entry: {
main: './src/index.js',
},
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: "url-loader",
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 2048
}
}
},{
test: /\.scss$/,
use: [
'style-loader',
{
loader: "css-loader",
options: {
importLoaders: 2 ,
modules: true
}
},
'sass-loader',
'postcss-loader'
]
}]
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new CleanWebpackPlugin()
],
output: {
// 增加pulbicPath
publicPath: "https://cdn.com.cn",
path: path.resolve(__dirname, 'build'),
filename: '[name].js'
}
}
- 进行打包,打包后的html文件会自动加上publicPath
一次打包多个文件
- 修改webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
mode: "development",
entry: {
// 一次打包两个文件
one: './src/index.js',
two: './src/index.js'
},
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: "url-loader",
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 2048
}
}
},{
test: /\.scss$/,
use: [
'style-loader',
{
loader: "css-loader",
options: {
importLoaders: 2 ,
modules: true
}
},
'sass-loader',
'postcss-loader'
]
}]
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new CleanWebpackPlugin()
],
output: {
path: path.resolve(__dirname, 'build'),
// output利用占位符输出两个文件
filename: '[name].js'
}
}
-
会生成one.js和two.js两个文件，并且index.html中会自动引入两个文件
