webpack 开发环境基础配置

核心概念

Entry : 入口 (Entry) 指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

Output : 输出 (Output) 指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

Loader : Loader 让 webpack 能够去处理那些非 JavaScript 文件 (webpack 自身只理解 JavaScript)

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

Mode

选项	描述	特点
development	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置 为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。	能让代码本地调试 运行的环境
production	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置 为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin。	能让代码优化上线 运行的环境

初始化配置

初始化 package.json 输入指令: npm init。下载并安装 webpack 输入指令

	npm install webpack webpack-cli -g 
	npm install webpack webpack-cli -D

编译打包

开发环境指令

功能：webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成浏览器能识别的语法。

webpack src/js/index.js -o build/js/built.js --mode=development

生产环境指令

功能：在开发配置功能上多一个功能，压缩代码。

webpack src/js/index.js -o build/js/built.js --mode=production

webpack 能够编译打包 js 和 json 文件。 能将 es6 的模块化语法转换成浏览器能识别的语法。 能压缩代码。

问题 ：不能编译打包 css、img 等文件。 不能将 js 的 es6 基本语法转化为 es5 以下语法。

创建配置文件

创建文件 webpack.config.js

配置内容如下

  const { resolve } = require('path'); // node 内置核心模块，用来处理路径问题。

  module.exports = {
    entry: './src/js/index.js', // 入口文件
    output: { // 输出配置
      filename: './built.js', // 输出文件名
      path: resolve(__dirname, 'build/js') // 输出文件路径配置
    },
    mode: 'development' //开发环境
  }

运行指令 webpack 打包

打包样式资源

目录结构

在 src 目录下的 index.js 中用 es6 模块化引入了 index.less 和 index.css 文件。然后以 index.js 作为入口文件开始打包。

webpack.config.js 文件

  const { resolve } = require('path')// node 提供的路径拼接方法

  module.exports = {
    entry: './src/index.js',// 入口文件
    output: {
      filename: 'built.js', // 输出文件名称
      path: resolve(__dirname, 'build')  //输出的地址
    },
    module: { // 配置 loader
      rules: [
        {
          test: /\.css$/,//正则表达式判断是以 .css 结尾的文件 
          use: [ // 由下向上执行
            'style-loader',
            'css-loader'
          ]
        },
        {
          test:/\.less$/,
          use:[
            'style-loader',
            'css-loader',
            'less-loader'
          ]
        }
      ]
    },
    plugins: [],//插件列表
    mode: 'development' // 环境
    //mode:'production'
  }

打包 HTML 资源

打包 html 文件需要使用 html-webpack-plugin 这个插件

操作步骤： 下载插件、在 webpack.config.js 文件中引入、使用

打包前目录结构

配置 webpack.config.js

  const { resolve } = require('path')
  const HtmlPlugin = require('html-webpack-plugin') //引入处理HTML的插件

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'built.js',
      path: resolve(__dirname, 'build')
    },
    module: {
      rules: [

      ]
    },
    // plugin 下载 引入 使用 
    plugins: [
      // plugins 的配置
      // html-webpack-plugin
      // 功能：默认会创建一个空的 HTML，自动引入打包输出的所有资源（JS/CSS）
      // 需求：需要有结构的 HTML 文件
      new HtmlPlugin({
        // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
        template:'./src/index.html'
      })
    ],
    mode: 'development'
  }

打包后目录结构

图片打包

目录结构

图片用两种情况：样式中的图片（如背景图片的设置）、html 中的 img 标签引用的图片

对于样式中的图片使用 url-loader 来进行处理（安装 url-loader 时要同时安装 file-loader）对于 html 中的图片则先使用 html-loader 来引入图片后，再使用 url-loader 来处理图片。使用 url-loader 处理图片的时候 可以设置大小 < 8kb 的图片使用 base64 的方式处理

配置代码

  const { resolve } = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'built.js',
      path: resolve(__dirname, 'build')
    },
    module: {
      rules: [
        {
          test: /\.less$/,
          // 要使用多个loader处理用use
          use: ['style-loader', 'css-loader', 'less-loader']
        },
        {
          // 问题：默认处理不了html中img图片
          // 处理图片资源
          test: /\.(jpg|png|gif)$/,
          // 使用一个loader
          // 下载 url-loader file-loader
          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位
            // [ext]取文件原来扩展名
            name: '[hash:10].[ext]'
          }
        },
        {
          test: /\.html$/,
          // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
          loader: 'html-loader'
        }
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './src/index.html'
      })
    ],
    mode: 'development'
  };

打包其他资源

字体的引入

目录结构

配置文件

  const { resolve } = require('path')
  const HP = require('html-webpack-plugin')

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'built.js',
      path: resolve(__dirname, 'build')
    },
    module: {
      rules: [
        {
          test:/\.css$/,
          use: [
            'style-loader',
            'css-loader',
            'less-loader'
          ]
        },//打包其他资源 （html js css 以外的资源）
        {
          //排除 html js css资源
          exclude: /\.(css|js|html)$/,
          loader:'file-loader',
          options:{
            name:'[hash:10].[ext]'//名字太长 截取名字
          }
        }
      ]
    },
    plugins: [
      new HP({
        template:'./src/index.html'
      })
    ],
    mode: 'development'
  }

devServer

devServer 能够为打包后的项目在本地开启一个服务器运行。能够自动监视所有相关文件的变化进行自动编译、自动打开浏览器、自动刷新浏览器。开启 devServer 后，代码只会在内存中编译打包，不会有任何输出。

首先要安装 wrbpack-dev-server 这个包

yarn add webpack-dev-server

配置项说明

contentBase : string 指定打包后项目入口文件地址

compress : boolean 启动 gzip 压缩 缩小代码体积、使运行速度快

port : number 服务器端口号（默认为8080）

open : boolean 自动打开浏览器

配置文件如下 webpack.config.js

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

  module.exports = {
      entry: './src/index.js',
      output: {
          filename: 'build.js',
          path: path.resolve(__dirname, 'build')
      },
      module: {
          rules: [
              {
                  test: /\.css$/,
                  use: ['style-loader', 'css-loader']
              },
              {
                  exclude: /\.(html|css|js)$/,
                  loader: 'file-loader',
                  options: {
                      name: '[hash:10].[ext]'
                  }
              }
          ]
      },
      plugins: [
          new HP({
              template: './src/index.html'
          })
      ],
      mode: 'development',

      //devserver 用来自动化操作（自动编译、自动打开浏览器、自动刷新浏览器）
      //只会在内存中编译打包，不会有任何输出
      // webpack-dev-server
      devServer: {
          //指定打包后项目入口文件地址
          contentBase: path.resolve(__dirname, 'build'),
          //启动 gzip 压缩 缩小代码体积、使运行速度快
          compress: true,
          // 端口号
          port: 3000,

          //自动打开浏览器
          open: true
      }
  }

开启 devServer 指令

npx webpack-dev-server

开发环境基础配置

开发环境配置：能让代码运行 运行项目指令： webpack 会将打包结果输出出去 npx webpack-dev-server 只会在内存中编译打包，没有输出（没有打包结果）

  //webpack.config.js
  const { resolve } = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: './src/js/index.js',
    output: {
      filename: 'js/built.js',
      path: resolve(__dirname, 'build')
    },
    module: {
      rules: [
        // loader的配置
        {
          // 处理less资源
          test: /\.less$/,
          use: ['style-loader', 'css-loader', 'less-loader']
        },
        {
          // 处理css资源
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        },
        {
          // 处理图片资源
          test: /\.(jpg|png|gif)$/,
          loader: 'url-loader',
          options: {
            limit: 8 * 1024,
            name: '[hash:10].[ext]',
            // 关闭es6模块化
            esModule: false,
            outputPath: 'imgs'
          }
        },
        {
          // 处理html中img资源
          test: /\.html$/,
          loader: 'html-loader'
        },
        {
          // 处理其他资源
          exclude: /\.(html|js|css|less|jpg|png|gif)/,
          loader: 'file-loader',
          options: {
            name: '[hash:10].[ext]',
            outputPath: 'media'
          }
        }
      ]
    },
    plugins: [
      // plugins的配置
      new HtmlWebpackPlugin({
        template: './src/index.html'
      })
    ],
    mode: 'development',
    devServer: {
      contentBase: resolve(__dirname, 'build'),
      compress: true,
      port: 3000,
      open: true
    }
  }