webpack打包、压缩html css等文件

webpack打包html资源

• 使用插件(plugins)对HTML文件进行处理（html-webpack-plugin）
• 使用步骤：1. 下载      2. 引入   3.使用
  • 下载安装：npm i html-webpack-plugin -D
  • 引入插件：const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
  • 使用插件：

 plugins: [
         // 功能：默认会创建一个空的HTML文件，自动引入打包输出的所有资源（JS/CSS）
        // new HtmlWebpackPlugin()
       
        // 通过参数可以输出有结构的HTML资源
        new HtmlWebpackPlugin({
            // 复制 './src/index.html'文件， 并自动引入打包输出的所有资源（JS/CSS）
            template: "./src/index.html",
		  // 默认是index.html名称，通过filename设置输出文件名称
	       // filename: "demo.html"      
        })
    ],

html-webpack-plugin插件生成的内存中的页面已帮我们创建并正确引用了打包编译生成的资源（JS/CSS）

压缩JS和HTML代码

// 通过参数可以输出有结构的HTML资源
        new HtmlWebpackPlugin({
            //复制 './src/demo.html'文件， 并自动引入打包输出的所有资源（JS/CSS）
            template: "./src/demo.html",
            filename: "demo.html",
           
	        // 压缩html代码
            minify: {
                // 移除空格
                collapseWhitespace:true,
                // 移除注释
                removeComments:true
            }
        })

webpack打包多html开发案例

// 多个entry 
entry: { 
       vendor:  ['jquery','./src/js/common.js'],
       index:  "./src/js/index.js",
       cart:  "./src/js/cart.js"
     },

   //负责打包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"]
         }),

webpack打包CSS资源

• 需要使用npm下载安装两个loader帮我们完成打包
  • 1. css-loader 的作用是处理css中的 @import 和 url 这样的外部资源
  • 2. style-loader 的作用是把样式插入到 DOM中，方法是在head中插入一个style标签，并把样式写入到这个标签的 innerHTML里

# npm i css-loader style-loader -D
# webpack 

提取CSS为单独文件

• css内容是打包在js文件中的， 可以使用”mini-css-extract-plugin”插件提取成单独的CSS文件。
  • npm i mini-css-extract-plugin -D

• 1. 在webpack.config.js 中引入插件
  • const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);
• 2. 在plugins模块中使用插件
  • plugins: [  new MiniCssExtractPlugin() ],
  • 或通过参数 filename重新命名提职的css文件名
  • new MiniCssExtractPlugin({ filename:’./css/demo.css’ })
• 3. 在CSS的rules中，使用MiniCssExtractPlugin.loader取代style-loader, 提取js中Css内容为单文件
  • { test: /\.css$/,  use: [ MiniCssExtractPlugin.loader, ‘css-loader’] }
  • 如果sass和less也提取成单独css文件，也一样将style-loader换成MiniCssExtractPlugin.loader
  • { test: /\.scss$/, use: [  MiniCssExtractPlugin.loader, ‘css-loader’, ‘sass-loader’] }

webpack打包图片资源

• 需下载url-loader和file-loader两个包， 依赖关系
• 在css中引入图片
• 在HTML中使用图片 需要下载 html-loader来处理图片

webpack打包其他资源

不需要优化和压缩处理，直接输出的资源，称为其他资源。