webpack介绍及使用

webpack的概念:

webpack是一个现代js应用程序的静态模块打包器。

理解webpack的四个核心概念:

• 入口(entry):webpack以哪个文件为入口,来作为构建内部依赖图的开始。
• 输出(output)：会创建一个文件夹,默认值是./dist,告诉webpack在什么地方输出创建的bundles

       1.output.filename    //出口文件名称

       2.output.path    //路径

• loader:让webpack可以处理那些非js的文件。

       1.test:标识要被转换的文件

       2.use:装换时,使用哪个loader

• 插件(plugins):通过require(),然后把它添加到plugins数组中

 一.webpack基本使用,将两个js文件打包到一个js中

1.去根目录创建一个package.json的文件

@H_696_40@yarn init -y  //不可以以中文和空格命名

2.安装依赖包

@H_696_40@yarn add webpack webpack-cli -D

3.去package.json进行配置

@H_696_40@"scripts":{
"build":"webpack"  //build这个名字可以自定义
}

4.新建目录src,注意这里一定要是src,webpack默认找下面的src文件夹

5.新建src/add/add.js - 定义求和函数导出

@H_696_40@expprt const addFn = (a,b)=>a+b

6.新建src/index.js导入使用

@H_696_40@//按需导入
import {addFn} from './add/add'
//{}里面的值要和定义按需导入的值一样
console.log(10,10)

7.运行打包命令

yarn build

二.webpack配置入口出口

默认入口:./src/index.js

默认出口:./dist/main.js     //打包js文件,输入yarn build 命令会自动出现dist文件

1.src同级目录新建webpack.config.js

2.填入配置项

@H_696_40@const path = require("path")

module.exports = {
    entry: "./src/main.js", // 入口
    output: { 
        path: path.join(__dirname, "dist"), // 出口路径
        filename: "bundle.js" // 出口文件名
    }
}

插件-自动生成html文件

下载插件

@H_696_40@yarn add html-webpack-plugin  -D

webpack.config.js配置

@H_696_40@//引入自动生成HTML的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {

//...省略其他代码
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html' // 以此为基准生成打包后html文件
        })
    ]

}

加载器-处理css文件

1.安装依赖包

@H_696_40@yarn add style-loader css-loader -D

webpack.config.js配置

@H_696_40@const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // ...其他代码
    module: { 
        rules: [ // loader的规则
          {
            test: /.css$/, // 匹配所有的css文件
            // use数组里从右向左运行
            // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
            // 再用 style-loader 将样式, 把css插入到dom中
            use: [ "style-loader", "css-loader"]
          }
        ]
    }
}

加载器-处理less文件

下载依赖包

@H_696_40@yarn add less less-loader -D

webpack.config.js配置

@H_696_40@module: {
  rules: [ // loader的规则
    // ...省略其他
    {
    	test: /.less$/,
    	// 使用less-loader, 让webpack处理less文件, 内置还会用less翻译less代码成css内容
        use: [ "style-loader", "css-loader", 'less-loader']
    }
  ]
}

加载器-处理图片文件

直接在webpack.confing.js 的rules就可以

{

test: /.(png|jpg|gif|jpeg)$/i,     type: 'asset'

}

webpack加载文件优缺点

图片转成base64字符串

优点是浏览器不用发送请求,直接读取

缺点是体积增大30%左右

加载器-处理高版本js语法

安装包

@H_696_40@yarn add -D babel-loader @babel/core @babel/preset-env

配置规则

@H_696_40@module: {
  rules: [
    {
        test: /.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
            }
        }
    }
  ]
}