webpack打包多html开发案例

简单说明:

1，案例没有使用devserver，所以不能实时查看

2，案例是将src下面的html、css、js分别进行处理

3，多html的规律是需要有多个entry，每个html一个entry，当然可以采用Esm模块化规则，同时需要新建多个HtmlWebpackPlugin

根据是否分离css文件，webpack.config.js分为两种

第一种是没有分离的，代码关键在于是否使用 extract-text-webpack-plugin这个插件。

var path = require("path"); //需要使用绝对路径
var HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack=require("webpack");
const CleanWebpackPlugin = require('clean-webpack-plugin')
// var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
entry: {

vendor:['jquery','./src/js/common.js'],
index: "./src/js/index.js",
cart: "./src/js/cart.js"
},
output: {
path: path.join(__dirname, "./dist"),
filename: "js/[name].js",
publicPath: ""
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
include: path.join(__dirname, 'src'),
exclude: /node_modules/,
}
,{
test: /\.css$/,
include: path.join(__dirname, 'src'),
exclude: /node_modules/,
loader: "style-loader!css-loader" //这种方式可以打包将css动态注入到html内部
}
]
},
plugins: [
new CleanWebpackPlugin(["./dist"], {
root: path.join(__dirname, ""),
verbose: true,
dry: false
}),
//负责打包html文件  将js注入到html中，minify压缩html
new HtmlWebpackPlugin({
filename: "index.html",
template: "./src/index.html",
chunks: ["index","vendor"],
minify:{
removeComment:true,
collapseWhitespace:true
}
}),
new HtmlWebpackPlugin({
filename: "cart.html",
template: "./src/cart.html",
chunks: ["cart","vendor"]
}),
//压缩js代码
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings:false
}
}),
//公共插件打包，抽取公共部分
new webpack.optimize.CommonsChunkPlugin({
name:'vendor',
chunks:['index','cart','vendor'],
mikChunks:2
}),
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
'window.Jquery':"jquery"
}),
//可以将css代码分离出来,如果不适用,分离成单独的文件，默认是自动注入到内部的
//  new ExtractTextPlugin({
//     filename: '[name].css',
// })
],
//devtool:"#source-map"  用于调试
}

使用这个插件也就是分离css的

var path = require("path"); //需要使用绝对路径
var HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack=require("webpack");
const CleanWebpackPlugin = require('clean-webpack-plugin')
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
entry: {

vendor:['jquery','./src/js/common.js'],
index: "./src/js/index.js",
cart: "./src/js/cart.js"
},
output: {
path: path.join(__dirname, "./dist"),
filename: "js/[name].js",
publicPath: ""
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
include: path.join(__dirname, 'src'),
exclude: /node_modules/,
}
,{
test: /\.css$/,
include: path.join(__dirname, 'src'),
exclude: /node_modules/,
loader: ExtractTextPlugin.extract({
fallback:"style-loader",
use:"css-loader"
}),
}
]
},
plugins: [
new CleanWebpackPlugin(["./dist"], {
root: path.join(__dirname, ""),
verbose: true,
dry: false
}),
//负责打包html文件  将js注入到html中，minify压缩html
new HtmlWebpackPlugin({
filename: "index.html",
template: "./src/index.html",
chunks: ["index","vendor"],
minify:{
removeComment:true,
collapseWhitespace:true
}
}),
new HtmlWebpackPlugin({
filename: "cart.html",
template: "./src/cart.html",
chunks: ["cart","vendor"]
}),
//压缩js代码
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings:false
}
}),
//公共插件打包，抽取公共部分
new webpack.optimize.CommonsChunkPlugin({
name:'vendor',
chunks:['index','cart','vendor'],
mikChunks:2
}),
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
'window.Jquery':"jquery"
}),
//可以将css代码分离出来,如果不适用,分离成单独的文件，默认是自动注入到内部的
new ExtractTextPlugin({
filename: 'css/[name].css',
})
],
//devtool:"#source-map"  用于调试
}

以上，后面研究加上devserver有关配置项目。

src下面的目录结构

dist下目录结构在分离情况下一致。

package.json

{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"server": "webpack-dev-server  --open",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^3.3.0"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.21.0",
"webpack-dev-server": "^2.11.0"
}
}

好吧，加上webpack-dev-server之后原来只是加上devServer的配置项就可以。

var path = require("path"); //需要使用绝对路径
var HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack=require("webpack");
const CleanWebpackPlugin = require('clean-webpack-plugin')
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
entry: {

vendor:['jquery','./src/js/common.js'],
index: "./src/js/index.js",
cart: "./src/js/cart.js"
},
output: {
path: path.join(__dirname, "./dist"),
filename: "js/[name]-[hash].js",
publicPath: ""
},
devServer:{
port:9000
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
include: path.join(__dirname, 'src'),
exclude: /node_modules/,
}
,{
test: /\.css$/,
include: path.join(__dirname, 'src'),
exclude: /node_modules/,
loader: ExtractTextPlugin.extract({
fallback:"style-loader",
use:"css-loader"
}),
}
]
},
plugins: [
//清除掉dist文件
new CleanWebpackPlugin(["./dist"], {
root: path.join(__dirname, ""),
verbose: true,
dry: false
}),
//负责打包html文件  将js、css注入到html中，minify压缩html，多文件的处理需要多个入口
new HtmlWebpackPlugin({
filename: "index.html",
template: "./src/index.html",
chunks: ["index","vendor"],
minify:{
removeComment:true,
collapseWhitespace:true
}
}),
new HtmlWebpackPlugin({
filename: "cart.html",
template: "./src/cart.html",
chunks: ["cart","vendor"]
}),
//压缩js代码
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings:false
}
}),
//公共插件打包，抽取公共部分
new webpack.optimize.CommonsChunkPlugin({
name:'vendor',
chunks:['index','cart','vendor'],
mikChunks:2
}),
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
'window.Jquery':"jquery"
}),
//可以将css代码分离出来,如果不适用,分离成单独的文件，默认是自动注入到内部的
new ExtractTextPlugin({
filename: 'css/[name]-[hash].css',
})
],
//devtool:"#source-map"  用于调试
}

新文章链接，更改为峰dev和bulid：https://www.cnblogs.com/zhensg123/p/9398595.html

本文结束。