webpack 打包优化体验+++

最新推荐文章于 2024-04-17 15:12:26 发布

qq_48041410

最新推荐文章于 2024-04-17 15:12:26 发布

阅读量329

点赞数

分类专栏：常用指令文章标签： vue vue.js webpack 前端 html

本文链接：https://blog.csdn.net/qq_48041410/article/details/107835746

版权

webpack

在这里插入图片描述

webpack 是一个模块打包器，主要目的是在浏览器上打包 JavaScript 文件。从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

特性

打包 CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS,等模块
可创建单个或多个按需加载的块，以减少初始加载时间
在编译期间会解决依赖关系，减少了运行时的大小

初体验

全局安装 webpack

npm install -g webpack webpack-cli // window 
sudo npm install -g webpack webpack-cli// mac 或者 linux

mkdir app // 新建app目录

在app目录下，新建 index.html 、index.js 、app.js文件填入以下内容

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script src="./dist/main.js"></script>
</html>

index.js

// 引入 app 组件
import app from "./app"
// 运行app 组件
app();

app.js

// 导出模块
export default function(){
   
    document.write("webpack 例子 lol!");
}

在app目录下运行 webpack
默认会在app目录下生成 dist/main.js 文件
打开 app 目录下的 index.html 文件，可以看到以下结果

在这里插入图片描述

通过 `webpack.config.js` 进行配置

新建 webpack.config.js 文件，填入以下内容

const path = require("path")
module.exports = {
   
    mode:"development",
    entry:"./index.js",
    output:{
   
        path:path.resolve(__dirname,"dist"),
        filename:"bundle.js"
    }
}

运行

webpack

此时会在当前目录下生成 dist/bundle.js 文件

核心概念

入口

**入口起点(entry point)**指示 webpack 应该使用哪个模块，来作为构建其内部依赖图(dependency graph) 的开始。例如：

webpack.config.js

module.exports = {
   
  entry: './path/to/my/entry/file.js'
};

输出(output)

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

const path = require('path');

module.exports = {
   
  entry: './path/to/my/entry/file.js',
  output: {
   
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

loader

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

在更高层面，在 webpack 的配置中，loader 有两个属性：

test 属性，识别出哪些文件会被转换。
use 属性，定义出在进行转换时，应该使用哪个 loader。

例如使用 css-loader 实现样式的加载

本地安装依赖

npm install --save-dev style-loader css-loader

配置 webpack.config.js 文件

const path = require("path")
module.exports = {
   
    mode:"development",
    entry:"./index.js",
    output:{
   
        path:path.resolve(__dirname,"dist"),
        filename:"bundle.js"
    },
    module:{
   
        rules:[
            {

最低0.47元/天解锁文章

qq_48041410

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack 打包优化体验+++

webpackwebpack 是一个模块打包器，主要目的是在浏览器上打包 JavaScript 文件。从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。特性打包 CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS,等模块可创建单个或多个按需加载的块，以减少初始加载时间在编译期间会解决依赖关系，减少了运行时的大小初体验全局安装 webpac
复制链接

扫一扫