webpack是什么

webpack是基于js的静态模块打包工具
打包:将多个文件压缩合并成一个文件,可以减少请求次数,减轻服务器的压力.

webpack做了哪些事

1:语法转换
​ 1:es6新语法,=>es5/es3的兼容性的代码
​ 2:typescript简称ts
​ 3:less/sass/stylus css预处理器
2:html/css/js进行打包,,进行代码的压缩合并
3:webpack可以起一个开发服务器
​ 1:自动打开浏览器
​ 2:监视文件代码变化
​ 3:保存时,自动刷新浏览器
上线前,一定先打包后上线
webpack中:一切的静态资源,都可以当成模块。

webpack基本使用步骤

  • 项目的初始化，目的：生成`package.json文件
npm init -y;

// 注意点：项目（文件夹）的名字不能有中文
  • 安装webpack的依赖包
npm i -D webpack webpack-cli
  • 给package.json配置一个脚本
"scripts": {
  "build": "webpack --config webpack.config.js"
}
  • 在根目录创建webpack的配置文件webpack.config.js
// 主要用于提供webpack的配置，可以先什么都不写
  • 运行命令
yarn build

// 注意：webpack没有任何配置的情况下，会对src下的index.js进行打包。。。。所以需要提供一个Index.js文件

webpack配置入口

所有的webapck都应该配置到对象中

module.exports = {
  
}

通过entry去配置webpack的入口

// 配置webpack的入口
entry: './src/main.js'

webpack配置出口

webpack出口配置

// 配置webpack的出口
output: {
  // webpack的出口所在的目录，默认是dist，如果需要提供，必须是绝对路径
  path: path.join(__dirname, 'dist'),
  // 出口的文件
  filename: 'bundle.js'
}

webpack配置打包模式

webpack提供了两种模式进行打包

development: 开发模式，，打包不压缩，文件大，打包速度快

production: 生产模式，打包需要压缩，文件小，打包速度慢

mode: 'production'
mode: 'development'

webpack配置html插件生成html

  • 安装依赖包
npm i -D html-webpack-plugin
  • 配置插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
  new HtmlWebpackPlugin({template: './src/index.html'})
]

webpack处理css文件

  • 安装依赖包
npm i -D css-loader style-loader
  • 添加css-loader的配置
module: {
  rules: [
    // 加载css的规则
    {
      test: /\.css$/,
      // loader的加载顺序是从右往左加载
      use: ['style-loader' ,'css-loader']
    }
  ]
}

webpack处理less文件

  • 安装依赖包
npm i -D less-loader less
  • 添加less-loader的规则
// 加载less的规则
{
  test: /\.less$/,
  use: ['style-loader' ,'css-loader', 'less-loader']
}

webpack处理图片

  • 安装依赖包
npm i -D file-loader url-loader
  • 配置url-loader的处理
// 加载图片的规则
{
  test: /\.(png|jpg|gif)$/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 10 * 1024
    }
  }
}

webpack处理字体图标

也是用url-loader,和处理图片一模一样
  • 安装依赖包
npm i -D file-loader url-loader
  • 配置url-loader的处理
// 加载字体图标的规则
{
  test: /\.(eot|ttf|svg|woff)$/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 10 * 1024
    }
  }
}

webpack处理音频和视频

也是用url-loader,和处理图片一模一样
  • 安装依赖包
npm i -D file-loader url-loader
  • 配置url-loader的处理
// 加载音视频的规则
{
  test: /\.(mp3|mp4|ogg)$/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 10 * 1024
    }
  }
}

使用mini-css-extract-plugin插件提取CSS

默认webpack会把css样式也打包到bundle.js中，缺点：项目中的样式比较多，如果都打包到一起，会导致打包的bundle.js文件过大。
  • ExtractTextWebpackPlugin 从 bundle 中提取文本（CSS）到单独的文件 , 注意 这个插件只适用于 webpack 3.x以前的版本
  • mini-css-extract-plugin 是webpack4.x版本用到的一个插件，用于从 bundle 中提取文本（CSS）到单独的文件
  • 安装依赖包
npm install -D mini-css-extract-plugin
  • 配置这个插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 配置插件
plugins: [
  new MiniCssExtractPlugin({
    // 指定生成的css文件名和路径
    filename: './css/index.css',
  })
],
  • 配置插件的loader
// 加载css的规则
{
  test: /\.css$/,
  // loader的加载顺序是从右往左加载
  // 把css-loader处理后的结果 不交给style-loader进行展示，交给MiniCssExtractPlugin这个插件
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        // 指定加载资源的路径
        publicPath: '../'
      }
    },
    'css-loader'
  ]
},
// 加载less的规则
{ 
  test: /\.less$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        // 指定加载资源的路径
        publicPath: '../'
      }
    } ,
    'css-loader', 
    'less-loader'
  ]
},

给图片和字体图标指定文件夹

图片的配置

// 加载图片的规则
{
  test: /\.(png|jpg|gif)$/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 10 * 1024,
      // 指定文件的生成的名字 使用原来的名字
      name: '[name].[ext]',
      // 指定输出目录
      outputPath: './images'
    }
  }
},

字体图标的配置

// 加载字体图标的规则
{
  test: /\.(eot|ttf|svg|woff)$/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 10 * 1024,
      name: '[name].[ext]',
      outputPath: './fonts'
    }
  }
},

配置babel-loader用于处理高版本的js语法

开发的时候，希望尽可能使用高版本的js语法， ES6 ES7 ES8 通过webpack配置babel-loader可以把高版本的js语法变成低版本的js语法。
  • 安装包
npm install -D babel-loader @babel/core @babel/preset-env
  • 配置babel-loader
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }

webpack-dev-server的使用

webpack-dev-server类似于webpack包,但是webpack-dev-server不是用于打包的，而是启动一个开发服务器，这个服务器会自多个监听代码的变化，并且自动帮我们重新打包。
  • 安装
npm i webpack-dev-server -D
  • 配置一个新的脚本
// 用于上线打包使用
"build": "webpack --config webpack.config.js",
// 用于开发环境使用
"dev": "webpack-dev-server --config webpack.config.js"

注意：千万不要使用vscode的自动保存功能

webpack-dev-server的配置

// 可以自动打开浏览器
open: true

// 修改服务器的端口
port: 3000

// 反向代理
proxy:

vue的单文件组件

https://cn.vuejs.org/v2/guide/single-file-components.html#ad

webpack处理vue文件

  • 安装依赖 vue
npm i vue
  • src下面提供index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>
  • 在src下新建App.vue组件作为根组件
<template>
  <div>
    我是根组件
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>
  • 在main.js中把App渲染为根组件
// 导入Vue
import Vue from 'vue'
// 导入App组件
import App from './App.vue'
// 把App组件渲染到页面中
// 根组件的内容不由el来提供，应该有App组件来提供
const vm = new Vue({
  el: '#app',
  // 固定写法：把App组件渲染到页面
  render: function (createElement) {
    return createElement(App)
  }
})
  • 启动项目
npm run dev

会报错

image-20200310144535869

webpack配置vue-loader

https://vue-loader.vuejs.org/zh/guide/#%E6%89%8B%E5%8A%A8%E8%AE%BE%E7%BD%AE

  • 安装包
npm install -D vue-loader vue-template-compiler
  • 配置vue的loader
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]
}
最后修改：2021 年 07 月 10 日 09 : 17 PM
© 允许规范转载
本文作者：博主：    
文章标题：webpack手动配置从零到一搭建项目
本文地址：https://www.iftiger.com/archives/173.html     
版权说明：若无注明，本文皆为“泰戈尔のBlog”原创，转载请保留文章出处。
如果觉得我的文章对你有用，可以对我进行您主观即不限定金额大小的打赏。