Webpack笔记（二）：打包资源

1、打包样式资源

因为样式并不能被webpack识别，所以我们回顾上一篇的内容，要想识别CSS，就要使用Loader，要想使用Loader，首先，我们需要先定义一个webpack.config.js的文件

webpack.config.js 是webpack的配置文件

作用：指示webpack干哪些活（当你运行webpack指令时，会加载里面的配置）

然后，webpack默认采用commonJS模块化方式，基本配置如下

//resolve是用来拼接绝对路径的方法
const { resolve } = require('path')

module.export = {
  //入口起点
  entry: './src.index.js',
  //输出
  output: {
    //输出文件名
    filename: 'built.js',
    //输出路径
    //__dirname是node.js的一个变量，代表当前文件（webpack.config.js）的目录绝对路径
    //resolve是用来拼接绝对路径的方法
    path: resolve(__dirname, 'build')
    //这行代码意思是，
    //找到当前webpack.config.js目录下的build目录，
    //在build目录里输出文件built.js
  },
  //loader的配置
  module: {
    rules: [
      //详细的loader配置
    ]
  },
  //plugins的配置
  plugins: [
    //详细plugins的配置
  ],
  //模式，只能指定一个
  mode: 'development',//开发环境
  
  // mode:'production',//生产环境
}

现在，我们想让webpack能够识别css文件，所以需要在loader中配置，配置之前，我们需要执行一条指令

npm i css-loader style-loader -D

这条指令是下载两个loader，一个是css-loader，一个是style-loader，下载完成之后，在webpack.config.js里边配置loader，css-loader配置如下

  module: {
    rules: [
      //详细的loader配置
      {
        //test:匹配哪些文件(正则表达式)
        test:/\.css$/,
        //use:使用哪些loader
        use:[
          //注意，use中的loader是倒序加载，从右到左，从下到上
          //创建一个style标签，将js中的样式资源插入，添加到head中生效
          'style-loader',
          //将css文件变成commonjs模块加载到js中，里面的内容是样式字符串
          'css-loader'
        ]
      }
    ]
  }

如果想要识别less语法，就需要下载less-loader，less-loader配置如下

 module: {
    rules: [
      //详细的loader配置
      {
        //test:匹配哪些文件(正则表达式)
        test:/\.css$/,
        //use:使用哪些loader
        use:[
          //注意，use中的loader是倒序加载，从右到左，从下到上
          //创建一个style标签，将js中的样式资源插入，添加到head中生效
          'style-loader',
          //将css文件变成commonjs模块加载到js中，里面的内容是样式字符串
          'css-loader',
          //将less编译成css文件
          'less-loader'
        ]
      }
    ]
  }

不同loader之间不能复用loader，比如说less-loader只能将less编译为css，但它不能识别css，所以还需要css-loader和style-loader,不能够说只有less-loader就足够了

2、打包HTML资源

首先打包HTML资源需要使用plugins，而plugins的使用方法跟loader有所不同

loader：
1、下载
2、使用（配置loader）

plugins：
1、下载
2、引入
3、使用（配置plugins）

下载html资源的插件叫html-webpack-plugin，plugins配置如下

'use strict';


const path = require('path');
//引入html的plugin插件
const HtmlWebpackPlugin=require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins:[
    //plugins的配置
    //默认会创建一个空HTML
    new HtmlWebpackPlugin()
  ],
  mode: 'development'
}

new HtmlWebpackPlugin()默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）

new HtmlWebpackPlugin({
	template:'./src/index.html'
})

上述代码会复制’./src/index.html’文件，并自动引入打包输出的所有资源（JS/CSS）

打包后的html文件，会引入打包输出的资源，如果HtmlWebpackPlugin里有参数，则会把参数里的文件里的内容复制过来

这是打包后输出的html文件

这是HtmlWebpackPlugin参数路径下的html文件

可见打包出来的html文件多了一个地址为bundle.js的script标签

3、打包图片资源

这里说明一下
当使用多个loader的时候，配置如下

{
    test: /\.less$/,
    use: ['style-loader', 'css-loader', 'less-loader']
},

当使用一个loader的时候，配置如下

{
    test:/\.(jpg|png|gif)$/,
    loader:'url-loader'
}

打包图片资源需要使用loader，图片loader配置如下

  module: {
    rules: [
      {
        test:/\.(jpg|png|gif)$/,
        loader:'url-loader',
        options:{
          //图片大小小于8KB，就会被base64处理
          //优点：减少请求数量（减轻服务器压力）
          //缺点：图片体积会更大（文件请求速度更慢）
          limit:8*1024,
          //给图片进行重命名
          //[hash:10]取图片的hash的前10位
          //[ext]取图片原来的扩展名
          name:'[hash:10],[ext]'
        }
      }
    ]
  },

打包图片需要下载两个loader：url-loader和file-loader

但是在这里设置url-loader，默认不能处理html中的img图片

怎么解决这个问题呢？

答案是引入html-loader

有人说，html-loader不是处理html的吗，其实并不是，处理html的是html的plugins，而这个html-loader，实则是处理html文件的img图片（负责引入img图片，从而能被url-loader进行处理）

html-loader配置如下，需要下载html-loader

{
   test:/\.html$/,
   //需要下载html-loader
   loader:'html-loader',
}

打包之前，需要打包的html文件，它引入了一张图片

打包之后，生成的html文件，因为我这张./address.png图片是小于8kb的，所以它被转化为了base64的格式

4、打包其他资源

什么叫做其他资源呢？

就是你页面中用到的一些图标、字体等等的资源，就叫做其他资源

打包其他资源需要用到loader

  module: {
    rules: [
    //打包其他资源(除了html/js/css资源以外的资源)
      {
      //排除css/js/html资源
       exclude:/\.(css|js|html)$/,
       loader:'file-loader'
      }
    ]
  },

如果文件名字太长，也可以给它设置一个options:{name:'[hash:10].[ext]'}

5、devServer

当你每次修改了文件之后，就需要重新再打包一次，这样重复的操作显得很冗余，于是，就有了下边的devServer（开发服务器）

devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）

配置如下

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: []
  },
  plugins: [],
  mode: 'development',
  //特点：只会在内存中编译打包，不会有任何输出
  //启动devServe指令为：npx webpack serve
  devServer:{
 	//项目构建后路径
    contentBase:resolve(__dirname,'dist'),
    //启动gzip压缩
    compress:true,
    //端口号
    port:3000,
    //自动打开浏览器
    open:true
  }
}

启动自动化打包的命令为 npx webpack serve(webpack5的命令)

一些小技巧
如果想要把输出的文件放在指定的文件夹里，可以设置成如下格式，举个例子

在对应的loader里加入outputPath字段，值是你想命名的文件夹名

注意：
1、css资源不会单独被打包成文件，它会被打包放在你所指定的output输出的filename的js文件里
2、如果想要将打包出来的js文件（output里的filename）放在文件夹里，可以设置output的filename为如下

output:{
	filename:"js/build.js",
	path:resolve(__dirname,'build')
}

输出的build.js文件将会在js文件夹下生成