webpack

webpack

webpack是什么？

打包 ------- 》 模块打包工具 （webpack就是把浏览器不认识的东西 打包成浏览器认识的html css js等内容）

webpack 分为4个部分 入口 出口 加载器 插件 就可以来自动化的构建我们当前的项目 把我们常见的sass less es模块化 ts 等这些浏览器不能解析的扩展语言 进行一个转换让浏览器可以正的渲染

webpack能干什么?

模块打包工具 webnpack可以根据我们设置的入口来尽心逐步的项目模块分析 找到之间模块与模块之间的关联 来进行一个翻译 让最终这个模块化项目得以在浏览器中进行一个渲染

webpack 与 gulp Grunt区别

webpack和gulp或者是gtunt是没有可比性的 gulp grunt是一个能有优化代码的一个工具 但是webpack除了他们两个都具有的功能以外 还有更加强大的 模块化解决方案 除了基本的合并 压缩 文件转换以外 还可以进行项目的模块化构建

模块化

a，js

import {text,fun} from "./b.js"
console.log(text)
fun()

b.js

export let text="小明";
export function fun(){
    console.log("我是函数")
}
​

大家发现浏览器不能正常解析模块项目

webpack基本使用

webpack -- 核心模块 webpack-cli 是webpack的相关命令行

下载 ：npm install -g webpack@4.39.3 webpack-cli@3

翻译模块化项目

cd到你的项目下

开始打包 : webpack 你要打包的文件 -o 输出的文件(名字随便起)

但是按照刚才上面的方式会发现打包虽然成功了 但是出现了警告

警告: 出现的原因就是 告诉你 你没有指定打包模式

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

打包模式:

production 默认的 生产环境 代码压缩

development 开发环境 代码没有压缩

打包指定模式 webpack --mode production或者development 你要打包的文件 -o 输出的文件(名字随便起)

简单的打包命令方式

你要使用简单的命令打包必须严格按照webpack的要求来完成

1.打包的文件夹名字必须叫 src

2.入口文件必须叫index.js

3.只需要输入 webpack --mode 模式 即可快速打包 不需要指定入口文件与 输入的文件名

内容就会自动生成在一个dist文件夹中main.js的文件

配置文件--入口 与 出口

webpack的问配置文件夹 webpack.config.js

入口: entry

出口:output

module.exports={
    // 入口
    entry:"./src/index.js",
    // 出口
    output:{
        // 输出到那个文件夹下  __dirname 运行这个文件的文件夹绝对路径
        path:__dirname+"/dist",
        // 输出的文件名字
        filename:"outindex.js"
    },
    // 打包模式
    mode:"development"
}

一次怎么打包多个文件

一次打包多个文件的化 入口文件就需要接收一个对象

  entry:{
        hehe:"./src/index.js",
        haha:"./src/indexb.js"
    },

如果有多个入口文件 那么出口文件需要用[name]来修饰

 filename:"out[name].js"

最终：

module.exports={
    // 入口
    // entry:"./src/index.js",
    // 一次打包多个文件的化 入口文件就需要接收一个对象
    entry:{
        hehe:"./src/index.js",
        haha:"./src/indexb.js"
    },
​
    // 出口
    output:{
        // 输出到那个文件夹下  __dirname 运行这个文件的文件夹绝对路径
        path:__dirname+"/dist",
        // 输出的文件名字
        // filename:"outindex.js"
        // 如果有多个入口文件 那么出口文件需要用[name]来修饰
        filename:"out[name].js"
    },
    // 打包模式
    mode:"development"
}

plugin 插件

插件就是扩展了webopack的打包功能 让wabpack在打包的工程中更加方便

配置文件中使用plugins:[] 来表示插件 数组中的每一项就是一个插件

clean-webpack-plugin

在打包之后清除原有的打包内容

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
​
module.exports={
    // 入口
    // entry:"./src/index.js",
    // 一次打包多个文件的化 入口文件就需要接收一个对象
    entry:{
        ii:"./src/index.js",
        ll:"./src/indexb.js"
    },
​
    // 出口
    output:{
        // 输出到那个文件夹下  __dirname 运行这个文件的文件夹绝对路径
        path:__dirname+"/dist",
        // 输出的文件名字
        // filename:"outindex.js"
        // 如果有多个入口文件 那么出口文件需要用[name]来修饰
        filename:"out[name].js"
    },
    // 打包模式
    mode:"development",
    // 插件
    plugins: [
        new CleanWebpackPlugin()
    ],
}

html-webpack-plugin

就是把打包之后的内容插入到html中

npm i --save-dev html-webpack-plugin@4

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
​
module.exports={
    // 入口
    // entry:"./src/index.js",
    // 一次打包多个文件的化 入口文件就需要接收一个对象
    entry:{
        xiaoming:"./src/index.js",
        xiaohong:"./src/indexb.js"
    },
​
    // 出口
    output:{
        // 输出到那个文件夹下  __dirname 运行这个文件的文件夹绝对路径
        path:__dirname+"/dist",
        // 输出的文件名字
        // filename:"outindex.js"
        // 如果有多个入口文件 那么出口文件需要用[name]来修饰
        filename:"out[name].js"
    },
    // 打包模式
    mode:"development",
    // 插件
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin()
    ],
}

devserver

就是开发中的微型服务器

下载 npm install -g webpack-dev-server@3

webpack-dev-server 启动项目之后 只需要在浏览器中 输入 localhost:8080即可

也可以修改启动命令 在package.json中 找到scripts 设置

 "scripts": {
    "start":"webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

同时在webpack的配置中 设置默认自动开启与端口配置

    devServer:{
        open:true,
        port:3000
    }

loader 加载器

他的作用就是把浏览器不认识的东西翻译成浏览器认识的东西

使用module来表示加载器的范围 在其中有一个rules是一个数组 数组中每个对象就是 我们的一个loader的使用

style-loader css-loader

style-loader 就是引用css

css-loader 就是把引用css插入到页面中

下载 ：npm install --save style-loader@1 css-loader@4

  module: {
        rules: [
          {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
          },
        ],
      }

sass-loader

下载

  "node-sass": "^4",
    "sass-loader": "^10",

配置

   {
            test: /\.scss$/,
            use: [
                "style-loader", // 将 JS 字符串生成为 style 节点
                "css-loader", // •将 CSS 转化成 CommonJS 模块
                "sass-loader" // 将 Sass 编译成 CSS，默认使用 Node Sass
            ]
        }

babel-loader 把浏览器不认识的翻译成认识的

babel-loader

webpack有什么用? 请你对webpack介绍一下

模块打包工具 webnpack可以根据我们设置的入口来尽心逐步的项目模块分析 找到之间模块与模块之间的关联 来进行一个翻译 让最终这个模块化项目得以在浏览器中进行一个渲染

1.依赖管理 可以方便的引用第三方模块 让模块的使用变得很容易

2.合并代码 把项目中分散的不体哦那个模块进行分析 打包成一个文件 从而减少了http的请求次数 可以减少和优化代码的体积

3.支持各种loader与plugin 可以非常方便的帮助我们继续把浏览器不认识的翻译成可以执行的文件

webpack的打包原理？与过程

webpack就是可以把一个项目当成一个整体 ,通过设置一个入口文件 webpack就会自动的根据这个入口文件与分析项目中所有依赖 然后使用loader来对其进行翻译处理 最后打包成一个浏览器可以识别的内容

1.解析配置参数：读取webpack的配置文件

2.注册对应的loader与plugin

3.通过分析项目的entry去找到对应的每个依赖文件（递归方式）

4.使用loader与plugin进行文件的转换

5根据设置的出口进行合并压缩导出