【Webpack】打包基础资源

webpack.config.js

1. webpack.config.js — webpack配置文件
   作用： 指示 webpack 干哪些活（当你运行webpack指令时，会加载里面的配置）
   所有构建工具都是基于nodejs平台运行的。模块化默认采用commonjs(module.exports =)
2. src — 项目代码 （es6 模块化 import）

打包样式资源

关键用 use: [‘style-loader’, ‘css-loader’ , ‘less-loader’]

• css-loader
  将css文件变成commonjs模块加载js中，里面内容是样式字符串
• style-loader
  创建一个style标签，将js中的样式资源插入进去，添加到header中生效(最终样式要在html中才能生效)
• less-loader
  如果匹配less文件，则需要less-loader, 把less转化为css

// resolve 用来拼接绝对路径的方法，为了避免不同的系统中斜杠的不同
const { resolve } = require('path');
module.exports = {
  // 入口起点
  entry: './src/index.js',
  // 输出
  output: {
    // 输出文件名
    filename: 'built.js',
    // 输出路径
    // __dirname nodejs的变量，代表当前文件的目录的绝对路径
    path: resolve(__dirname, 'build')
  },
  // loader的配置
  module: {
    rules: [
      // 详细的loader配置
      {
        // 匹配哪些文件
        test: /\.css$/,
        // 使用哪些loader进行处理
        // use: [{
        //   loader: 'css-loader'
        // }]
        use: [
          // use数组中loader执行顺序，从右到左，从下到上依次执行
          // 创建一个style标签，将js中的样式资源插入进去，添加到head中生效
          'style-loader',
          // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
          'css-loader'
        ]
      }
    ]
  },
  // plugins配置
  plugins: [
    // 详细plugins的配置
  ],
  // 模式
  mode: 'development', // production
}

打包html资源

基本配置同上，但loade、plugins不一样。
关键用 plugins: HtmlWebpackPlugin

• 功能： 默认会创建一个html文件，引入打包输出的所有资源（js/css）
• 需求： 需要有结构的html文件

plugins: [
​    new HtmlWebpackPlugin(
​      // 复制'./src/index.html’文件, 并自动引入打包输出的所有资源（js/css）
​      {template: './src/index.html'}
​    )
  ]

打包图片资源

关键用 非html图片：loader: ‘url-loader’ ---- html中图片：html-loader

注意点：

• 要使用多个loader处理的用use, 使用一个loader用loader
• 一个图片如果好几个地方用，也只打包一次，不会打包多次
• 处理非html中的图片资源 只需要url-loader：
  1. 下载url-loader （依赖于） file-loader
  2. 默认处理不了html中的img图片
• 处理html中的图片资源，需要html-loader
  1. 处理html文件的img图片（负责引入img, 从而能被url-loader进行处理）
• loader: ‘url-loader’ 的统计option配置中加入esModule: false
  问题：url-loader默认使用es6模块化解析， 而html-loader引入图片时用commonjs解析， 所以解析时会报错
  解决：关闭url-loader的es6模块化，使用commonjs解析

 module: {
    rules: [
      {
        test: /\.less$/,
        use: [ 'style-loader', 'css-loader',  'less-loader' ]
      },
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'url-loader',
        options: {
          // 图片大小小于8kb, 就会被base64处理
          // base64 优点：减少请求数量（减轻服务器压力）
          //        缺点：图片体积会更大（文件请求时间变长）
          limit: 8 * 1024,
          esModule: false
        }
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      }
    ]
  }

打包其他资源

Iconfont…等等 关键使用：loader: file-loader
打包其他资源(除了html、js、css资源以外的资源) 他会原封不动的输出文件

moudle: {
	rules: [
		 {
           exclude: /\.(css|less|js|html|jpg|png|gif)$/,
           loader: 'file-loader',
           options: {
             name: '[hash:10].[ext]'
       }
	]
}