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:
         }),
         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:
         }),
         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:
     },
     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:
         }),
         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

本文结束。