簡單說明:css
1，案例沒有使用devserver，因此不能實時查看html
2，案例是將src下面的html、css、js分別進行處理node
3，多html的規律是須要有多個entry，每一個html一個entry，固然能夠採用Esm模塊化規則，同時須要新建多個HtmlWebpackPluginjquery
根據是否分離css文件，webpack.config.js分爲兩種webpack
第一種是沒有分離的，代碼關鍵在因而否使用 extract-text-webpack-plugin這個插件。web
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的json
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有關配置項目。babel
src下面的目錄結構webpack-dev-server
dist下目錄結構在分離狀況下一致。ide
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 }
新文章連接，更改成峯dev和bulid：https://www.cnblogs.com/zhensg123/p/9398595.html
本文結束。