webpack-模块打包器

什么是webpack

webpack可以理解为 模块打包器.
可以将我们网页应用程序中所依赖的各种资源（图片/css/js/sass/.vue/…）当成模块引入
webpack进行模块打包，打包成浏览器可以使用模块
使用场景：更适用于 单页面应用
vue+webpack (vuecli就是搭建好的webpack的开发环境)
react+webpack(create-react-app)
入口函数：在入口函数中可以通过commonjs模块化（nodejs）或者es6模块化来引入各种类型的资源
出口函数：入口函数中 引入各种资源，webpack处理后，形成一个新的js文件

安装webpack

npm init 
npm i webpack webpack-cli -D

注意：
一个软件（插件如webpack） 如果不是全局安装的，命令行执行运行 这个命令会报错
命令行中运行是全局安装的插件
如何运行项目本地安装的插件（软件）
package.json新增一个脚本，在脚本中运行这个 命令即可

webpack默认配置

webpack默认的入口文件是 src/index.js
默认的出口是 dist目录下 dist/main.js

自定义webpack配置

项目根目录下创建 webpack.config.js

webpack 的 模板字符串 以及预定义的一些变量

“[webpack预定义好的变量]”
哪些变量

name 入口函数的名字
hash 生成随机数 根据入口函数内容生成

单入口配置

  // 单入口配置
  entry: path.join(__dirname, 'src/main.js'),
  // 指定webpack的出口
  output: {
    // 出口目录
    path: path.join(__dirname, 'dist'),
    // 出口文件名
    filename: '[name].[hash:8].js'
  } 

多入口配置

entry:{
    a: path.join(__dirname, 'src/main.js'),
    b: path.join(__dirname, 'src/main2.js')
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].[hash:8].js'
    /* 
    [] 可以理解为 字符串中模块字符串 里面可以写变量
    name: 入口名字叫什么 name就是什么 a.js b.js
    hash 随机数 根据内容 生成随机数
    :8限制 随机数的长度
    */
  }

webpack中模板定义 定义项目中的模板文件（html）

html-webpack-plugin
功能是配置 项目中的模板文件（html文件），自动将出口文件，自动引入html文件中
webpack插件：

npm i html-webpack-plugin -D
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    plugins: [
    new HtmlWebpackPlugin({
      title: '你好webpack',
      // 定义模板的目录
      template: path.join(__dirname,'src/public/index.html')
    })
  ]
}

webpack loader

模块解析器
功能：用于解析 非 js文件

解析非js文件 需要loader
不同文件类型有不同的loader

loader配置

module.exports = {
   module: { // 定义不同loarder配置规则
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }
    ],
  },
}
/*
test是一个正则：代表以 .xxx结尾文件
use: 匹配这个规则  的文件使用什么loader来解析
use写法有三种
	1,只有一个loader
	 { test: /\.css$/, use: 'style-loader' }
	2， 多个loader 两种写法
	 use是数组 里面直接写loader名
	 { test: /\.css$/, use: ['style-loader','css-loader'] }
	 use还是一个数组 里面写 对象
	 好处是 使用某个loader还可以传can
	 { test: /\.css$/, use: [
	 	{
	 		loader:"style-loader",
	 		options: {
	 			
	 		}
	 	},
	 	{
	 		loader:"css-loader",
	 		options: {
	 			
	 		}
	 	}
	 ] }
*/

解析 css

css-loader

npm i css-loader style-loader -D


module.exports = {
  module: {
    rules: [ // 在这里配置不同loader的规则
      {
        test: /\.css$/, // 以.css结尾文件
        // use: 'css-loader' 直接写loader
        // use:['style-loader','css-loader'], //同时使用多个loader,注意解析顺序从后往前
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: { // 使用loader时可以传配置
              sourceMap: true
            }
          }
        ]
      }
    ]
  }
}

解析 less

npm i less less-loader -D
// 如果是sass
npm i node-sass sass-loader
less-loader 是将.less 解析 成css

es6转es6 babel

npm install -D babel-loader @babel/core @babel/preset-env

{
  rules: [
    {
      test: /\.m?js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            ['@babel/preset-env', { targets: "defaults" }]
          ]
        }
      }
    }
  ]
}

解析 图片 音频 字体 视频 等静态资源

file-loader

    {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'imgs/[name].[hash:8].[ext]'
              // ext设计代表后缀名
            }
          },
        ],
      },

url-loader解析静态资源

dataURL base64格式
使用跟file-loader很像，url-loader可以将静态资源解析成 dataURL格式（base64）
好处：减少http请求
url-loader:包含了file-loader
定义url-loader 定义 解析文件的 体积 （小于这个体积的解析成base64 大于这个体积自动使用file-loader）

{
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 1024,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'imgs/[name].[hash:8].[ext]'
                }
              },
            }
          },
        ],

clean-webpack-plugin

每一次 build代码前 自动删除

babel-loader 解析 es6

npm install -D babel-loader @babel/core @babel/preset-env

{
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', { targets: "defaults" }]
            ]
          }
        }
      }

服务器

npm i webpack-dev-server
需要注意：webpack-cli需要回退版本安装3.x版本
eg: “webpack-cli”: “^3.3.12”,

// 服务器
  devServer: {
    // 服务器监听根目录
    contentBase: path.join(__dirname, 'dist'),
    // 开启服务器 gzip压缩 提高网页打开速度
    compress: true,
    port: 3000,
    // 热加载
    hot: true,
    open: true
  },

resolve

resolve:{
    // 定义模块引入时哪些文件可以省略后缀名
    extensions:['.js','.json','.vue'],
    // 定义路径别名
    alias:{
      '@': path.resolve(__dirname,'src')
    }
  }

搭建 vue spa应用

安装三个插件
vue-loader 解析vue单文件组件
vue-template-compiler 解析 vue模板
vue-style-loader 将单文件组件style标签中的css 通过头部style标签作用到页面上

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
  // mode 模式 development不压缩 默认 production 压缩
  mode: 'development',
  // 定义入口 单入口
  entry: path.join(__dirname, 'src/main.js'),
  // 定义出口
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'chunk.[hash:8].js'
  },
  module: { // 定义不同loarder配置规则
    rules: [
      { test: /\.vue$/, use: ['vue-loader'] },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 1024,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'imgs/[name].[hash:8].[ext]'
                }
              },
            }
          },
        ],
      },
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', { targets: "defaults" }]
            ]
          }
        }
      }
    ],
  },
  // 定义webpack插件 比如 处理 模板文件 html
  plugins: [
    new HtmlWebpackPlugin({
      title: '你好webpack',
      // 定义模板的目录
      template: path.join(__dirname, 'public/index.html')
    }),
    new CleanWebpackPlugin(),
    new VueLoaderPlugin()
  ],
  // 服务器
  devServer: {
    // 服务器监听根目录
    contentBase: path.join(__dirname, 'dist'),
    // 开启服务器 gzip压缩 提高网页打开速度
    compress: true,
    port: 3000,
    // 热加载
    hot: true,
    open: true
  },
  resolve:{
    // 定义模块引入时哪些文件可以省略后缀名
    extensions:['.js','.json','.vue'],
    // 定义路径别名
    alias:{
      '@': path.resolve(__dirname,'src')
    }
  }
}