简单说明:
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: false 40 }), 41 //负责打包html文件 将js注入到html中，minify压缩html 42 new HtmlWebpackPlugin({ 43 filename: "index.html", 44 template: "./src/index.html", 45 chunks: ["index","vendor"], 46 minify:{ 47 removeComment:true, 48 collapseWhitespace:true 49 } 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:false 60 } 61 }), 62 //公共插件打包，抽取公共部分 63 new webpack.optimize.CommonsChunkPlugin({ 64 name:'vendor', 65 chunks:['index','cart','vendor'], 66 mikChunks:2 67 }), 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: false 43 }), 44 //负责打包html文件 将js注入到html中，minify压缩html 45 new HtmlWebpackPlugin({ 46 filename: "index.html", 47 template: "./src/index.html", 48 chunks: ["index","vendor"], 49 minify:{ 50 removeComment:true, 51 collapseWhitespace:true 52 } 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:false 63 } 64 }), 65 //公共插件打包，抽取公共部分 66 new webpack.optimize.CommonsChunkPlugin({ 67 name:'vendor', 68 chunks:['index','cart','vendor'], 69 mikChunks:2 70 }), 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:9000 21 }, 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: false 47 }), 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:true 56 } 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:false 67 } 68 }), 69 //公共插件打包，抽取公共部分 70 new webpack.optimize.CommonsChunkPlugin({ 71 name:'vendor', 72 chunks:['index','cart','vendor'], 73 mikChunks:2 74 }), 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 }
本文结束。