likes
comments
collection
share

webpack配置指南

作者站长头像
站长
· 阅读数 17

webpack概述

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler )

webpack中文网

webpack官网

webpack做了什么

  • 语法转换

    • less/sass转换成css
    • ES6转换成ES5
    • typescript转换成js
  • html/css/js代码的压缩与合并（打包）

  • webpack可以在开发期间提供一个开发环境

    • 自动开启浏览器
    • 自动监视文件变化
    • 自动刷新浏览器
  • 项目一般都需要经过webpack打包之后才上线。

webpack模块说明

webpack会把所有的资源都当成模块

  • css
  • js
  • 图片
  • 字体图标

webpack给前端开发提供了模块化的开发环境

  • 对于js文件，webpack中支持AMD、CMD、commonJS、ES6模块化等语法
  • 有了webpack，我们可以在前端代码中使用任意的模块化语法
  • 可以在浏览器中使用nodejs的模块化语法const $ = require('jquery')

webpack基本使用

  • 创建一个文件夹webpack-demo
  • 初始化项目 生成package.json
yarn init -y
  • 安装webpack的依赖包
yarn add webpack webpack-cli -D
  • 新建文件src和dist文件夹，，src用于提供源码，，dist用于存放打包后的文件
  • 在src下新建了index.js文件，目的：对src/index.js文件进行打包
  • 在package.json文件配置了打包的脚本
  "scripts": {
    "build": "webpack --config webpack.config.js"
  }
  • 在项目的根目录，创建一个文件webpack.config.js
  • 执行打包命令
yarn build

配置webpack的打包入口

  • 在webpack.config.js文件中
// 这是webpack的配置文件
// webpack是运行在node环境中，webpack可以执行任意的node代码，包括可以使用node中模块。
module.exports = {
  // 默认： ./src/index.js
  entry: './src/app.js'
}

配置webpack的打包出口

配置webpack最终打包的文件的出口
  // 配置webpack打包出口
  output: {
    // path： 打包出口的目录,默认 dist, 必须指定绝对路径
    path: path.join(__dirname, 'lib'),
    // filename: 打包出口的文件名字  默认 main.js
    filename: 'bundle.js'
  }

==如果要配置path，记得是绝对路径==

配置webpack的打包模式

  // 打包模式  development|production
  // development: 打包不会对进行压缩   打包快
  // production: 打包会对代码进行压缩  上线
  mode: 'development'

配置html-webpack-plugin插件

html-webpack-plugin插件能够帮助我们自动在dist中生成一个html文件，并且会自动帮我们引入打包后的文件。
  • 安装html-webpack-plugin插件
yarn add html-webpack-plugin -D
  • 在webpack.config.js中配置
//1. 导入html-webpack-plugin插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 2.配置webpack的插件，是一个数组
plugins: [new HtmlWebpackPlugin({
  // 生成html的模板
  template: './src/index.html'
})

配置css-loader处理css文件

webpack天生只能处理js文件，如果需要处理其他类型的文件，需要配置loader
  • 安装依赖包
yarn add css-loader style-loader -D
  • 配置loader
module: {
  rules: [
    // 配置css-loader的规则
    {
      // 匹配所有.css结尾的文件
      test: /\.css$/,
      // 使用css-loader 和 style-loader处理
      use: ['style-loader', 'css-loader']
    }
  ]
}

==注意：loader加载顺序从右往左==

配置less-loader处理less文件

  • 安装依赖包
yarn add less-loader less -D
  • 配置less-loader
// 配置less-loader的规则
{
  // 匹配所有.less结尾的文件
  test: /\.less$/,
    // 使用css-loader 和 style-loader处理
    use: ['style-loader', 'css-loader', 'less-loader']
}

配置file-loader处理图片

  • 安装依赖包
yarn add file-loader -D
  • 配置file-loader
// file-loader配置
{
  test: /\.(png|jpg|gif)$/,
  use: 'file-loader'
}

配置url-loader处理图片

  • 安装
yarn add url-loader file-loader -D
  • 配置url-loader
{
  test: /\.(png|jpg|gif)$/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 20 * 1024
    }
  }
}

配置字体图标和音视频

// 字体图标
{
  test: /\.(eot|svg|ttf|woff)$/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 20 * 1024
    }
  }
},
{
  test: /\.(mp3|mp4|ogg)$/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 20 * 1024
    }
  }
}

配置babel-loader

babel可以把高版本的js语法转成低版本的js语法，保证运行的效果一样。能够兼容更多的浏览器。
  • 安装依赖包
yarn add  babel-loader @babel/core @babel/preset-env -D
  • 配置babel
{
  test: /\.m?js$/,
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}

提取css到单独的文件中

  • 安装插件
yarn add mini-css-extract-plugin -D
  • 配置插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 配置插件
plugins: [
  new MiniCssExtractPlugin({
    // 指定生成的css文件名和路径
    filename: './index.css',
  })
],
  • 配置css和less的loader
{
  test: /\.css$/,
  // css-loader只能够让webpack能够处理css文件
  // style-loader： 能够把处理好的css代码添加到页面中
  // MiniCssExtractPlugin.loader ; 把css提取到单独的css文件中
  use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
  test: /\.less$/,
  use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
},

webpack-dev-server的使用

webpack-dev-server不是用来打包的，而是用于启动一个服务器，，，，，当我们代码发生了改变，webpack-dev-server会重新打包（内存）并且会刷新浏览器，实时看到效果

最新版本的webpack5还不支持，需要降级处理

"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
  • 安装包
yarn add webpack-dev-server -D

# 注意：如果需要使用webpack-dev-server  就不能使用最新的webpack5版本， 应该使用webpack 4
  • 配置一个脚本
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "serve": "webpack-dev-server --config webpack.config.js"
  },
  • 使用dev脚本
yarn serve
  • 常见配置
  // devServer的配置
  devServer: {
    // 自定义端口
    port: 9090,
    // 自动打开浏览器
    open: true
  }

webpack处理vue文件

  • 新建了一个App.vue文件
<template>
  <div class="app">我是根组件 ---{{msg}}  --<demo></demo> </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'hello'
    }
  },
}
</script>

<style>
.app {
  background-color: red;
}
</style>
  • 在main.js中导入App.vue根组件，并且渲染成为根组件
import Vue from 'vue'
import App from './App.vue'

const vm = new Vue({
  el: '#app',
  // 把App组件渲染成根组件
  render: c => c(App),
  // 把app渲染成为根组件
  // render: function(createElement) {
  //   return createElement(App)
  // }
})
  • 报错，因为webpack处理不了vue文件
  • 安装依赖包
yarn add vue-loader@15.9.0 vue-template-compiler -D
  • 在webpack.config.js中配置vue-loader
const VueLoaderPlugin = require('vue-loader/lib/plugin')

  plugins: [
    new VueLoaderPlugin()
  ],

    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]

配置文件

/* webpack的配置 */
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  // 打包入口
  entry: './src/main.js',
  // 打包出口
  output: {
    // 配置文件
    filename: 'app.js',
    // 配置默认的打包出口路径,,,必须是绝对路径
    // path: path.join(__dirname, 'lib')
  },
  // 打包模式
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    }),
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin()
  ],
  module: {
    rules: [
      // 处理css
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 20 * 1024
          }
        }
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  devServer: {
    open: true,
    port: 8888
  }
}

我的博客：http://hellozhb.top/