简单说明:
1，案例没有使用devserver，所以不能实时查看
2，案例是将src下面的html、css、js分别进行处理
3，多html的规律是需要有多个entry，每个html一个entry，当然可以采用Esm模块化规则，同时需要新建多个HtmlWebpackPlugin
根据是否分离css文件，webpack.config.js分为两种
第一种是没有分离的，代码关键在于是否使用 extract-text-webpack-plugin这个插件。
1 var path = require("path"); //需要使用绝对路径 2 var HtmlWebpackPlugin = require("html-webpack-plugin"); 3 const webpack=require("webpack"); 4 const CleanWebpackPlugin = require('clean-webpack-plugin') 5 // var ExtractTextPlugin = require("extract-text-webpack-plugin") 6 7 module.exports = { 8 entry: { 9 10 vendor:['jquery','./src/js/common.js'],11 index: "./src/js/index.js",12 cart: "./src/js/cart.js"13 },14 output: {15 path: path.join(__dirname, "./dist"),16 filename: "js/[name].js",17 publicPath: ""18 },19 module: {20 rules: [21 {22 test: /\.js$/,23 loader: 'babel-loader',24 include: path.join(__dirname, 'src'),25 exclude: /node_modules/,26 }27 ,{28 test: /\.css$/,29 include: path.join(__dirname, 'src'),30 exclude: /node_modules/,31 loader: "style-loader!css-loader" //这种方式可以打包将css动态注入到html内部32 }33 ]34 },35 plugins: [36 new CleanWebpackPlugin(["./dist"], {37 root: path.join(__dirname, ""),38 verbose: true,39 dry: false40 }),41 //负责打包html文件 将js注入到html中，minify压缩html42 new HtmlWebpackPlugin({43 filename: "index.html",44 template: "./src/index.html",45 chunks: ["index","vendor"],46 minify:{47 removeComment:true,48 collapseWhitespace:true49 }50 }),51 new HtmlWebpackPlugin({52 filename: "cart.html",53 template: "./src/cart.html",54 chunks: ["cart","vendor"]55 }),56 //压缩js代码57 new webpack.optimize.UglifyJsPlugin({58 compress:{59 warnings:false60 }61 }),62 //公共插件打包，抽取公共部分63 new webpack.optimize.CommonsChunkPlugin({64 name:'vendor',65 chunks:['index','cart','vendor'],66 mikChunks:267 }),68 new webpack.ProvidePlugin({69 $:"jquery",70 jQuery:"jquery",71 'window.Jquery':"jquery"72 }),73 //可以将css代码分离出来,如果不适用,分离成单独的文件，默认是自动注入到内部的74 // new ExtractTextPlugin({75 // filename: '[name].css',76 // })77 ],78 //devtool:"#source-map" 用于调试79 } 使用这个插件也就是分离css的
1 var path = require("path"); //需要使用绝对路径 2 var HtmlWebpackPlugin = require("html-webpack-plugin"); 3 const webpack=require("webpack"); 4 const CleanWebpackPlugin = require('clean-webpack-plugin') 5 var ExtractTextPlugin = require("extract-text-webpack-plugin") 6 7 module.exports = { 8 entry: { 9 10 vendor:['jquery','./src/js/common.js'],11 index: "./src/js/index.js",12 cart: "./src/js/cart.js"13 },14 output: {15 path: path.join(__dirname, "./dist"),16 filename: "js/[name].js",17 publicPath: ""18 },19 module: {20 rules: [21 {22 test: /\.js$/,23 loader: 'babel-loader',24 include: path.join(__dirname, 'src'),25 exclude: /node_modules/,26 }27 ,{28 test: /\.css$/,29 include: path.join(__dirname, 'src'),30 exclude: /node_modules/,31 loader: ExtractTextPlugin.extract({32 fallback:"style-loader",33 use:"css-loader"34 }),35 }36 ]37 },38 plugins: [39 new CleanWebpackPlugin(["./dist"], {40 root: path.join(__dirname, ""),41 verbose: true,42 dry: false43 }),44 //负责打包html文件 将js注入到html中，minify压缩html45 new HtmlWebpackPlugin({46 filename: "index.html",47 template: "./src/index.html",48 chunks: ["index","vendor"],49 minify:{50 removeComment:true,51 collapseWhitespace:true52 }53 }),54 new HtmlWebpackPlugin({55 filename: "cart.html",56 template: "./src/cart.html",57 chunks: ["cart","vendor"]58 }),59 //压缩js代码60 new webpack.optimize.UglifyJsPlugin({61 compress:{62 warnings:false63 }64 }),65 //公共插件打包，抽取公共部分66 new webpack.optimize.CommonsChunkPlugin({67 name:'vendor',68 chunks:['index','cart','vendor'],69 mikChunks:270 }),71 new webpack.ProvidePlugin({72 $:"jquery",73 jQuery:"jquery",74 'window.Jquery':"jquery"75 }),76 //可以将css代码分离出来,如果不适用,分离成单独的文件，默认是自动注入到内部的77 new ExtractTextPlugin({78 filename: 'css/[name].css',79 })80 ],81 //devtool:"#source-map" 用于调试82 } 以上，后面研究加上devserver有关配置项目。
src下面的目录结构
dist下目录结构在分离情况下一致。
package.json
1 { 2 "name": "webpack", 3 "version": "1.0.0", 4 "description": "", 5 "main": "webpack.config.js", 6 "scripts": { 7 "server": "webpack-dev-server --open", 8 "test": "echo \"Error: no test specified\" && exit 1" 9 },10 "author": "",11 "license": "ISC",12 "dependencies": {13 "webpack": "^3.3.0"14 },15 "devDependencies": {16 "babel-core": "^6.26.3",17 "babel-loader": "^7.1.4",18 "babel-preset-env": "^1.7.0",19 "clean-webpack-plugin": "^0.1.19",20 "css-loader": "^0.28.11",21 "extract-text-webpack-plugin": "^3.0.2",22 "html-webpack-plugin": "^3.2.0",23 "style-loader": "^0.21.0",24 "webpack-dev-server": "^2.11.0"25 }26 } 好吧，加上webpack-dev-server之后原来只是加上devServer的配置项就可以。
1 var path = require("path"); //需要使用绝对路径 2 var HtmlWebpackPlugin = require("html-webpack-plugin"); 3 const webpack=require("webpack"); 4 const CleanWebpackPlugin = require('clean-webpack-plugin') 5 var ExtractTextPlugin = require("extract-text-webpack-plugin") 6 7 module.exports = { 8 entry: { 9 10 vendor:['jquery','./src/js/common.js'],11 index: "./src/js/index.js",12 cart: "./src/js/cart.js"13 },14 output: {15 path: path.join(__dirname, "./dist"),16 filename: "js/[name]-[hash].js",17 publicPath: ""18 },19 devServer:{20 port:900021 },22 module: {23 rules: [24 {25 test: /\.js$/,26 loader: 'babel-loader',27 include: path.join(__dirname, 'src'),28 exclude: /node_modules/,29 }30 ,{31 test: /\.css$/,32 include: path.join(__dirname, 'src'),33 exclude: /node_modules/,34 loader: ExtractTextPlugin.extract({35 fallback:"style-loader",36 use:"css-loader"37 }),38 }39 ]40 },41 plugins: [42 //清除掉dist文件43 new CleanWebpackPlugin(["./dist"], {44 root: path.join(__dirname, ""),45 verbose: true,46 dry: false47 }),48 //负责打包html文件 将js、css注入到html中，minify压缩html，多文件的处理需要多个入口49 new HtmlWebpackPlugin({50 filename: "index.html",51 template: "./src/index.html",52 chunks: ["index","vendor"],53 minify:{54 removeComment:true,55 collapseWhitespace:true56 }57 }),58 new HtmlWebpackPlugin({59 filename: "cart.html",60 template: "./src/cart.html",61 chunks: ["cart","vendor"]62 }),63 //压缩js代码64 new webpack.optimize.UglifyJsPlugin({65 compress:{66 warnings:false67 }68 }),69 //公共插件打包，抽取公共部分70 new webpack.optimize.CommonsChunkPlugin({71 name:'vendor',72 chunks:['index','cart','vendor'],73 mikChunks:274 }),75 new webpack.ProvidePlugin({76 $:"jquery",77 jQuery:"jquery",78 'window.Jquery':"jquery"79 }),80 //可以将css代码分离出来,如果不适用,分离成单独的文件，默认是自动注入到内部的81 new ExtractTextPlugin({82 filename: 'css/[name]-[hash].css',83 })84 ],85 //devtool:"#source-map" 用于调试86 } 新文章链接，更改为峰dev和bulid：https://www.cnblogs.com/zhensg123/p/9398595.html
本文结束。