2021-8-23 webpack

1.2 Webpack五个核心概念

1.2.1 Entry

入口（Entry）指示Webpack以哪个文件为入口起点开始打包，分析构建内部依赖图

1.2.2 Output

输出（Output）指示Webpack打包后的资源bundles输出到哪里去，以及如何命名

1.2.3 Loader

Loader让Webpack能够去处理那些非JavaScript文件（webpack自身只能理解javas）

1.2.4 Plugins

插件（Plugins）可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等

1.2.5 Mode

development

能让代码本地调试运行的环境

production

能让代码优化上线运行的环境

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  //输出
  output: {
    //输出文件名
    filename: 'build.js',
    //输出路径
    //__dirname nodejs的变量，代表当前文件的目录绝对路径
    path: path.resolve(__dirname, 'build')
  },
  //loader的配置
  module: {
    rules: [
      //详细loader配置
      //不同文件必须配置不同loader处理
      {
        test: /\.css$/,
        use: [
          //use数组中loader执行顺序，从左到右，从下到上，依次执行
          //创建style标签，将js中的样式资源插入进行，添加到head中生效
          'style-loader',
          //将css文件变成commonjs模块加载js中，里面内容是样式字符串
          'css-loader'
        ],
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          //将less-loader编译成css文件
          'less-loader'
        ]
      },
      {
        //默认处理不了html中img图片
        //处理图片资源
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          //图片大小小于8kb，就会被base64处理
          //优点：减少请求数量（减轻服务器压力）
          //缺点：图片体积会更大（文件请求速度更慢）
          limit: 8 * 1024,
          //问题：因为url-loader默认使用es6解析，而html-loader引入图片是commonjs
          //解析时会出问题：[object Module]
          //解决：关闭url-loader的es6模块化，使用commonjs解析
          esModule: false,
          //给图片进行重命名
          //[hash:10]取图片的hash的前10位
          name: '[hash:10].[ext]'
        }
      },
      {
        test: /\.html$/,
        //处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
        loader: 'html-loader'
      },
      //打包其他资源（除了html/js/css资源以外的资源）
      {
        exclude:/\.(css|js|html|less)$/,
        loader: 'file-loader'
      }
    ]
  },
  plugins: [
    //plugin的配置
    //html-webpack-plugin
    //功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（js/css）
    //需求：需要有结构的HTML文件
    new HtmlWebpackPlugin({
      //复制 './src/index.html'文件，并自动引入打包输出的所有资源（js/css）
      template: './src/index.html'
    })
  ],
  //开发服务器devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
  //特点：只会在内存中编译打包，不会有任何输出
  //启动devServer指令为:webpack-dev-server
  devServer:{
    contentBase:path.resolve(__dirname,'build'),
    //启动gzip压缩
    compress:true,
    //端口号
    port:3000,
    //自动打开浏览器
    open:true
  },
  mode: 'development'
}