开发环境webapck.config.js配置详解

1.打包样式资源(采用loader)

webpack只能处理js/json资源,因此对于样式资源的打包需要通过loader,而loader需要在webpack.config.js(webpack配置文件)中进行定义

其中webpack.config.js配置文件用于指示webpack需要做哪些操作,当运行webpack指令的时候,会加载里面的配置项,且此配置文件语法采用commonjs,原因是:所有构建工具都是基于nodejs平台运行的,而基于nodejs模块化默认采用commonjs,而这个不同于项目中js源文件.js采用的es6语法。

项目结构:

bulid

src

index.js

index.css

webpacl.config.js

webpack.config.js结构:

// resolve用来拼接绝对路径
const { resolve } = require('path');

module.exports = {
    // webpack配置
    // 入口起点
    entry: './src/index.js',
    // 输出
    output: {
        // 输出文件名
        filename: 'main.js',
        // 输出路径
        // 表示输出到当前文件所属目录下的bulid目录
        path: resolve(__dirname,'bulid')
    },
    // loader的配置
    module: {
        rules:[
            // 详细loader配置
        ]
    },
    // plugins配置
    plugins: [
        // 详细plugins的配置
    ],
    // 模式 表明此时是开发者模式
    mode: 'development',
}

loader配置(css资源打包配置):

module: {
        rules:[
            // 详细loader配置
            {
                // 匹配哪些文件
                // 此处表示匹配以.css结尾的文件
                test: /\.css$/,
                // 使用哪些loader进行处理
                use: [
                    // use数组loader执行顺序:从右到左,从下到上,依次执行,也即先执行css-loader,再执行style-loader
                    // 创建style标签,将js中的样式资源(上一部分所形成的样式字符串)插入到style标签中,添加到head中
                    'style-loader',
                    // 将css文件变成commonjs模块加载在js中,里面内容是样式字符串
                    'css-loader'
                ]
            }
        ]
    }

注意:以上涉及到的loader,需要先下载再使用:npm i -s style-loader css-loader

执行打包,由于添加了配置文件,则执行输入webpack即可进行打包

注意:不同文件必须配置不同loader处理

因此对于less文件的处理配置为:

先下载包:npm i -s style-loader css-loader less-loader less ,由于less-loader依赖于less,因此也要下载less,否则报错

module: {
        rules:[
            // 处理css文件
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            // 处理less文件
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    // 将less文件编译成css文件
                    'less-loader'
                ]
            }
        ]
    }
2.打包html资源(采用plugins)

html资源的打包配置可以采用plugins进行配置的,不同于loader配置(先下载loader,再使用loader),plugins的配置有三个步骤,分别是:

  • 下载

    npm i html-webpack-plugin -D
    

    其中-D表示以开发者模式下载

  • 引入

    const htmlWebpackPlugin = require('html-webpack-plugin')
    
  • 使用

    由于htmlWebpackPlugin是一个构造函数,所以采用创建实例的方式调用

    plugins: [
          new htmlWebpackPlugin();
        ],
    

    如果仅仅是以上方式调用,实际的功能是:默认会创建一个空的html文件(没有任何样式 js的),并自动引入打包输出的所有资源(JS/CSS/图片...)

    但是一般情况下需要有结构的html文件,则采取以下的方式配置

    plugins: [
          new htmlWebpackPlugin({
              template: './src/index.html',
              filename: 'main.html'// 指定输出文件名
          });
        ],
    

    以上配置的功能是:采用./src/index.html填充空的html文件,并自动引入打包输出的所有资源(js/css/图片...)

    注意:由于打包html会自动引入打包输出的所有资源,因此不用在作为模板的./src/index.html中再次引入,不然可能容易出现意想不到的错误

3.打包图片资源
  • 图片在样式文件中引入,而html文件中不存在图片的情况

    css

    .box1 {
        width: 200px;
        height: 200px;
        background-image: url(../imgs/1.PNG);
        background-repeat: no-repeat;
    }
    
    .box2 {
        width: 300px;
        height: 200px;
        background-image: url(../imgs/2.PNG);
        background-repeat: no-repeat;
    }
    
    .box3 {
        width: 400px;
        height: 200px;
        background-image: url(../imgs/3.PNG);
        background-repeat: no-repeat;
    }
    
    const { resolve } = require('path');
    
    const htmlWebpackPlugin = require('html-webpack-plugin');
    
    // console.log();
    
    module.exports = {
      entry: './src/index.js',
      output: {
        filename: 'bulid.js',
        path: resolve(__dirname,'bulid')
      },
      module: {
        rules: [
          {
            test: /\.less$/,
            use: [
              'style-loader',
              'css-loader',
              'less-loader'
            ]
          },
          {
            test: /\.css$/,
            use: [
              'style-loader',
              'css-loader'
            ]
          },
          {
            // 处理图片资源 严格区分大小写 url-loader对图片路径引入的处理
            test: /\.(PNG|jpg|gif)$/,
            // 使用单个loader采用loader声明,使用多个loader采用use处理
            // 由于url-loader依赖于file-loader 因此下载url-loader 也需要下载file-loader
            loader: 'url-loader',
            options: {
              // 图片大小小于8kb,就会被base64处理
              // 优点:减少请求数量,减轻服务器压力
              // 缺点:图片体积会更大,导致文件请求速度变慢,所以不是所有的图片大小都适合base64处理,一般处理小于8kb~12kb的图片
              limit: 8 * 1024
            }
          }
        ]
      },
      plugins: [
        new htmlWebpackPlugin({
          template: './src/webpack_02.html',
          filename: 'index.html'
        })
      ],
      mode: 'development'
    }
    

    打包结果:

    小于8kb的图片进行base64编码处理,大于8kb的图片被打包,图片名称为根据当前图片生成的唯一的hash值,且对于相同的图片,webpack不会重复处理,只会打包一次

    但是一般情况下,会在html标签中对图片进行引入,在html引入图片

    
    
    
        
        hhhh
    
    
    
    1
    2
    3
    2.PNG

    还是采用以上的配置进行打包处理,结果:html文件中的img->src依然如初,浏览器中显示不了图片,原因:打包之后的index.html目录下没有./imgs/2.PNG图片资源,所以,可以看出以上配置并不能处理html中的图片资源,只能处理css/less引入的图片资源,解决:

  • 处理html中引入的图片:

    添加:html-loader

    // 此处只展示loader部分,原因:新增内容只在loader中
      module: {
        rules: [
          {
            test: /\.less$/,
            use: [
              'style-loader',
              'css-loader',
              'less-loader'
            ]
          },
          {
            test: /\.css$/,
            use: [
              'style-loader',
              'css-loader'
            ]
          },
          {
            // 处理图片资源 严格区分大小写
            test: /\.(PNG|jpg|gif)$/,
            // 使用单个loader采用loader声明,使用多个loader采用use处理
            // 由于url-loader依赖于file-loader 因此下载url-loader 也需要下载file-loader
            loader: 'url-loader',
            options: {
              // 图片大小小于8kb,就会被base64处理
              // 优点:减少请求数量,减轻服务器压力
              // 缺点:图片体积会更大,导致文件请求速度变慢,所以不是所有的图片大小都适合base64处理,一般处理小于8kb~12kb的图片
              limit: 8 * 1024
            }
          },
          {
            test: /\.html$/,
            // 处理html文件中的img图片(负责引入img,从而能被url-loader进行处理)
            loader: 'html-loader'
          }
        ]
      }
    

    配置文件之后,再次打包,结果如下:

    img标签:

    2.PNG
    

    但是双击打包之后的3e4643f01f5a182ea427.PNG,显示不了图片,且显示出错信息:image not loaded Try to open it externally to fix format problem,同时浏览器打开index.html,仍然显示不了该图片,原因是:url-loader默认使用es6模块化解析,而html-loader引入图片采用的是commonjs模块化解析,解析不同导致问题的出现,解决:关闭url-loader的es6模块化,使用comonjs解析。对于webpack5,还需要在html-loader中关闭es6模块化

     {
            // 处理图片资源 严格区分大小写
            test: /\.(PNG|jpg|gif)$/,
            // 使用单个loader采用loader声明,使用多个loader采用use处理
            // 由于url-loader依赖于file-loader 因此下载url-loader 也需要下载file-loader
            loader: 'url-loader',
            options: {
              // 图片大小小于8kb,就会被base64处理
              // 优点:减少请求数量,减轻服务器压力
              // 缺点:图片体积会更大,导致文件请求速度变慢,所以不是所有的图片大小都适合base64处理,一般处理小于8kb~12kb的图片
              limit: 8 * 1024,
              esModule: false,
              // 给图片重命名 [hash:10]取图片的hash的前10位 [ext]取文件原来扩展名
              name: '[hash:10].[ext]'
            }
          },
          {
            test: /\.html$/,
            // 处理html文件中的img图片(负责引入img,从而能被url-loader进行处理)
            loader: 'html-loader',
            options: {
              esModule: false
            }
          }
    

    最后结果:完整显示图片

打包其他资源
module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader','css-loader']
    },
    // 打包其他资源(除了html js css 资源以外的资源)其他资源是指:已配置处理的资源之外的没有处理的资源
    {
      // 排除css html js 以为的资源 
      exclude: /\.(css|html|js)$/, // 或者写成:test: \./(xx|xxx)$\采用此方式需要一个一个匹配
      loader: 'file-loader'
    }
  ]
},
开发环境总写:
/**
  开发环境搭建:能运行代码
 **/
const {  resolve } = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/index.js',
    path: resolve(__dirname, 'bulid')
  },
  // loader配置
  module:{
    rules: [
      // css配置
      {
        test: /\.css$/,
        use:['style-loader','css-loader']
      },
      {
        // less配置
        test: /\.less$/,
        use: ['style-loader','css-loader','less-loader']
      },
      {
        // 图片资源
        test: /\.(jpg|PNG|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          outputPath: 'imgs/',
          esModule: false
        }
      },
      {
        // 处理html中的图片资源
        test: /\.html$/,
        loader: 'html-loader',
        options: {
          esModule: false
        }
      },
      {
        // 处理其他资源
        exclude: /\.(html|js|css|less|jpg|PNG|png|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          // 指出输出路径
          outputPath: 'media'
        }
      }
    ]
  },
  // plugins配置
  plugins: [
    new htmlWebpackPlugin({
      template: './src/webpack_02.html'
    })
  ],
  // 模式
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname,'bulid'),
    compress: true,
    port: 3000
  }
}

你可能感兴趣的:(开发环境webapck.config.js配置详解)