美文网首页
Webpack初探

Webpack初探

作者: Xara_ | 来源:发表于2020-12-03 20:42 被阅读0次

Webpack是什么

Webpack是一种前端资源构建工具，一个静态模块打包器（module bundler）。在Webpack看来，前端的所有资源文件（js/json/css/img/less/...）都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）。


在这里插入图片描述

Webpack 五个核心概念

Entry

入口（Entry）指示Webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。

Output

输出（Output）指示Webpack打包后的资源bundles输出到哪里去，以及如何命名。

Loader

Loader让Webpack能够去处理那些非JavaScript文件（Webpack自身只能理解JavaScript）。

Plugins

插件（Plugins）可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

Mode

模式（Mode）指示Webpack使用相应模式的配置。


在这里插入图片描述

Webpack初试

  1. 新建pacakge.json文件
    npm init
  2. 安装webpack和webpack-cli
    npm install webpack webpack-cli -D 
 -S
即--save（保存）
包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在

-D
即--dev（生产）
包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如babel，sass-loader这些解析器
  1. 通过webpack打包文件
/*index.js文件*/

import data from './data.json';
console.log(data);


function  add(x,y) {
    return x + y;
}
console.log(add(1,2));

/*data.json文件*/

{
  "name": "Cecilia",
  "age": 20
}

在控制台输入（二者其一）：
webpack ./src/index.js -o ./build/built.js --mode=development
webpack ./src/index.js -o ./build/built.js --mode=production
控制台将打印：

{ name: 'Cecilia', age: 20 }
3

index.js: webpack入口起点文件
1.运行指令：
    开发环境：webpack ./src/index.js -o ./build/built.js --mode=development
        webpack会以./src/index.js为入口文件开始打包，打包后输出到./build/built.js
        整体打包环境是开发环境
    生产环境：webpack ./src/index.js -o ./build/built.js --mode=production
        webpack会以./src/index.js为入口文件开始打包，打包后输出到./build/built.js
        整体打包环境是生产环境

2.结论：
    1.webpack能处理js/json资源，不能处理css/img等其他资源
    2.生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
    3.生产环境比开发环境多一个js压缩代码

Webpack基本配置

配置webpack.config.js文件
webpack.config.js ----- webpack的配置文件
作用：指示webpack干哪些活（当你运行webpack指令时，会加载里面的配置）。
所有构建工具都是基于nodejs平台运行的，模块化默认采用commonjs。

//resolve用来拼接绝对路径的方法
const { resolve } = require('path');

module.exports = {
    //webpack配置
    //入口起点
    entry: './src/index.js',
    //输出
    output: {
        //输出文件名
        filename: 'built.js',
        //输出路径
        //__dirname是nodejs的变量，代表当先文件的目录绝对路径
        path: resolve(__dirname, 'build')
    },
    //loader的配置
    module: {
        rules: [
            //详细loader配置
        ]
    },
    //plugins的配置
    plugins: [
        //详细plugins配置
    ],
    //模式
    mode: 'development'     //开发模式
    // mode: 'production'
};

打包样式资源

  1. 在src目录下新建css和less文件：
/*index.css文件*/
html,body{
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: pink;
}

/*index.less文件*/
#title {
  color: #ffffff;
}
  1. 配置webpack.config.js文件：
/*webpack.config.js文件*/

const { resolve } = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            //不同文件必须配置不同loader处理
            {
                //匹配哪些文件
                test: /\.css$/,
                //使用哪些loader进行处理
                use: [
                    //use数组中loader执行顺序：从右到左，从上到下依次执行
                    //创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'style-loader',
                    //将css文件变成commonjs模块加载到js中，里面内容是样式字符串
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    //将less文件编译成css文件
                    //需要下载less-loader和less两个包
                    'less-loader'
                ]
            }
        ]
    },
    plugins: [
        //详细plugins配置
    ],
    mode: 'development'
};
  1. 下载相关包：
    npm install style-loader css-loader less-loader less -D
  2. 在index.js文件中引入样式资源：
/*index.js文件*/

//引入样式资源
import './index.css';
import './index.less';
  1. 输入打包命令：
    webpack
  2. 在bulid目录下生产打包后的bulit.js文件
  3. 在html文件中引入打包后的js文件：
<!--index.html文件-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack</title>
</head>
<body>
<!--    引入打包后的js文件-->
    <script src="built.js"></script>
    <h1 id="title">hello webpack</h1>
</body>
</html>

打包html资源

  1. 在src目录下新建index.html文件和index.js文件：
<!--src/index.html-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack</title>
</head>
<body>
    <h1 id="title">hello html</h1>
</body>
</html>

/*src/index.js*/

function add(x,y) {
    return x + y;
}
console.log(add(2,3));
  1. 配置webpack.config.js文件：
/*webpack.config.js文件*/

/*
loader：1.下载     2.使用（配置loader）
plugins：1.下载    2.引入    3.使用
 */

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: "built.js",
        path: resolve(__dirname, 'build')
    },
    loader: {
        rules: [
            //详细loader配置
        ]
    },
    plugins: [
        //html-webpack-plugin
        //功能：默认会创建一个空的HTML文件，自动引入打包输出所有的资源（JS/CSS）
        //需求：需要有结构的HTML文件
        new HtmlWebpackPlugin({
            //复制"./src/index.html"文件，并自动引入打包输出所有的资源（JS/CSS）
            template: "./src/index.html"
        })
    ],
    mode: "development"
};
  1. 下载相关包：
    npm install html-webpack-plugin -D
  2. 输入打包命令：
    webpack
  3. 在bulid目录下生成打包后的bulit.js文件，并创建index.html文件,自动将所有打包输出的资源引入该html文件中。
<!--bulid/index.html-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack</title>
</head>
<body>
    <h1 id="title">hello html</h1>
<script src="built.js"></script></body>
</html>

在该html文件中，会显示打包后的html资源，也会显示js资源（即在控制台打印5）。
注意：使用html-webpack-plugin插件会自动引入所有资源，不需要自己再引入，避免重复引入。

打包图片资源

  1. 在src目录下新建index.html和index.less文件：
<!--src/index.html-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack</title>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <img src="img/react.jpg" alt="react">
</body>
</html>

/*src/index.less*/

#box1{
  width: 100px;
  height: 100px;
  background-image: url("img/angular.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#box2{
  width: 200px;
  height: 200px;
  background-image: url("img/vue.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#box3{
  width: 300px;
  height: 300px;
  background-image: url("img/react.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
  1. 在src目录下新建index.js文件，引入样式资源：
/*src/index.js*/

import './index.less';
  1. 配置webpack.config.js文件：
/*webpack.config.js*/

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: "built.js",
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                //使用多个loader处理用use
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                //问题：默认处理不了html中img标签引入的图片
                //处理图片资源
                test: /\.(jpg|png|gif)$/,
                //使用一个loader
                //下载url-loader file-loader
                loader: 'url-loader',
                options: {
                    //图片大小小于8kb，就会被base64处理
                    //优点：减少请求数量（减轻服务器压力）
                    //缺点：图片体积会更大（文件请求速度更慢）
                    limit: 8 * 1024,
                    //问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
                    //解析时会出问题：[object Module]
                    //解决：关闭url-loader的es6模块化，使用commonjs解析
                    esModule: false,
                    //给图片进行重命名
                    //[hash:10]取图片的hash的前10位
                    //[ext]取原来文件扩展名
                    name: '[hash:10].[ext]'
                }
            },
            {
                test: /\.html$/,
                //处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
                loader: 'html-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],
    mode: "development"
};
  1. 下载相关包：
    npm install url-loader file-loader html-loader -D
  2. 输入打包命令：
    webpack
  3. 在build目录下生成打包后的built.js文件，并生成新的index.html文件，将built.js引入。
<!--bulid/index.html-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack</title>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <img src="4454005113.jpg" alt="react">
<script src="built.js"></script></body>
</html>

关于limit: 8 * 1024：

在这里插入图片描述
只有两张图片被打包（小于8kb）
在这里插入图片描述
尝试的时候打包了两次，第二次以hash前十位重命名，生成了两次文件
name: '[hash:10].[ext]'
在这里插入图片描述
小于8kb的图片被base64压缩为字符串格式
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

打包其他资源

  1. 将iconfont所需资源下载到本地，引入src目录下：


    在这里插入图片描述
  2. 在src目录下新建index.html，使用iconfont：
<!--src/index.html-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack</title>
</head>
<body>
    <span class="iconfont .icon-icon-test"></span>
    <span class="iconfont .icon-icon-test1"></span>
    <span class="iconfont .icon-icon-test2"></span>
    <span class="iconfont .icon-icon-test3"></span>
    <span class="iconfont .icon-icon-test4"></span>
    <span class="iconfont .icon-icon-test5"></span>
    <span class="iconfont .icon-icon-test6"></span>
</body>
</html>
  1. 在src目录下新建index.js文件，并引入iconfont样式文件：
/*src/index.js*/

//引入iconfont样式文件
import './iconfont.css';
  1. 配置webpack.config.js文件：
/*webpack.config.js*/

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: "built.js",
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            },
            //打包其他资源（除了html/js/css/less资源以外的资源）
            {
                //排除css/html/js/less资源
                exclude: /\.(css|html|js|less)$/,
                loader: 'file-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],
    mode: "development"
};
  1. 输入打包命令：
    webpack
  2. 在build目录下生成打包后的built.js文件，并且新生成index.html文件，将built.js文件引入。

devServer

  1. 在webpack.config.js中配置devServer：
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: "built.js",
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    esModule: false,
                    name: '[hash:10].[ext]'
                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],
    mode: "development",

    //开发服务器devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
    //特点：只会在内存中编译打包，不会有任何输出
    //启动devServer指令为：npx webpack-dev-server
    devServer: {
        //项目构建后路径
        contentBase: resolve(__dirname, 'build'),
        //启动gzip压缩
        compress: true,
        //端口号
        port: 3000,
        //自动打开浏览器
        open: true
    }
};
  1. 下载相关包：
    npm install webpack-dev-server -D
  2. 启动devServer：
    npx webpack-dev-server

相关文章

  • 关于webpack的笔记1

    初探webpack 1、webpack是干什么的？ 1)、webpack在GitHub上面是是一个很火的项目。we...

  • webpack初探

    [TOC] 一、webpack是干什么的 二、安装webpack 三、核心概念 Entry 入口 Module 模...

  • Webpack初探

    Webpack是什么 Webpack是一种前端资源构建工具，一个静态模块打包器（module bundler）。在...

  • 初探 Webpack

    一、关于 Webpack Webpack 是什么Webpack 是一个现代 JavaScript 应用程序的模块打...

  • webpack 初探

    4.0 和 3.0 版本 不一样 1、 npm install --save-dev webpack 2、npm...

  • 初探webpack小记

    webpack学习记录 安装webpack 全局安装webpack：npm install webpack -g之...

  • webpack指南 - 初探

    原文链接 翻译作者：饭团爸爸 开始 可能你已经知道 webpack 被用来编译 JavaScript 的 modu...

  • webpack初探笔记

    参考链接：https://www.jianshu.com/p/42e11515c10f什么是webpack web...

  • webpack4 模块打包工具1

    第一章 webpack初探 环境安装 node.js[https://nodejs.org/en/]image.p...

  • Angular2进阶

    在之前《Angular2初探》一文中我们已经将Angular2基于webpack+Typescript的开发环境搭...

网友评论

      本文标题：Webpack初探

      本文链接：https://www.haomeiwen.com/subject/hodewktx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|Webpack初探|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！