webpack打包多html開發案例

時間 2019-12-09

標籤 webpack 打包 html 開發案例欄目 HTML 简体版

原文原文鏈接

簡單說明: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 }