webpack

最新推荐文章于 2024-08-06 17:16:47 发布
最新推荐文章于 2024-08-06 17:16:47 发布
阅读量100 收藏
点赞数
分类专栏： 前端积累 文章标签： webpack javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L20150514/article/details/120919362
版权

webpack 作用

  • Webpack 唯一的功能就是打包

安装 webpack

  • cnpm install webpack -g

webpack配置文件

  • webpack,config.js
  • 	module.exports={
		mode:'none','production','development',
		entry:'入口' || {roukou1:'',roukou2:''},
		output:{
			path,
			filename
		}
	}

案例

  • 多入口
  • webpack.config.js 
    • const path = require('path');

module.exports={
    mode:'development',
    entry:{
        index:'/src/1.js',
        admin:'/src/2.js'
    },
    output:{
        path:path.resolve(__dirname,'build'),
        filename:'[name].min.js'
    }
}
      可使用 [name]作为占位符
  • 1.js 
    • let a =10;

alert(a);
  • 2.js 
    • import $ from 'jquery';

$(()=>{
    alert(10);
});
  • 打包结果
    • 在这里插入图片描述
    • 在这里插入图片描述

loader

  • 帮助 webpack 处理 js 以外的文件
  • 安装 css-loader 和 style-loader
  • loader 顺序为从后往前执行

css-loader style-loader

  • webpack.config.js
    const path = require('path');

module.exports={
    mode:'development',
    entry:{
        index:'/src/js/1.js',
        admin:'/src/js/2.js'
    },
    output:{
        path:path.resolve(__dirname,'build'),
        filename:'[name].min.js'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    }
}
  • css文件
    body{background: yellow;}
  • js文件
    import $ from 'jquery';
import '../css/main.css';


$(()=>{
    alert(10);
});
  • 打包
    • 在这里插入图片描述
    • 打包结果
      在这里插入图片描述
  • 浏览器中查看效果
    • html代码
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="build/2.min.js"></script>
</head>
<body>
    
</body>
</html>
    • 结果
      在这里插入图片描述

postcee-loader 和 autoprefixer

  • postcee-loader 给浏览器添加 前缀
  • autoprefixer 选择性添加前缀 配合 postcss-loader使用
  • webpack.config.js
    const path = require('path');

module.exports={
    mode:'development',
    entry:'/src/js/1.js',
    output:{
        path:path.resolve(__dirname,'build'),
        filename:'bundle.min.js'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader','postcss-loader']
            }
        ]
    },
    
}
  • postcss.config.js中
    	module.exports = {
    "plugins": [
        require('autoprefixer')({
            browsers: [
                "> 1%",
                "last 2 versions",
                "not ie <= 8"
            ]
        })
    ]
}
  • 结果
    在这里插入图片描述
    自动添加了前缀
    在这里插入图片描述
  • 注意
    在这里插入图片描述

file-loader

  • 作用：file-loader可以用来帮助webpack打包处理一系列的图片文件；比如：.png 、 .jpg 、.jepg等格式的图片；
  • 使用file-loader打包图片的结果：使用file-loader打包的图片会给每张图片都生成一个随机的hash值作为图片的名字；
  • 在这里插入图片描述
  • 在这里插入图片描述
  • 打包结果
    在这里插入图片描述

url-loader

  • url-loader可以设置图片大小限制，当图片超过限制时，其表现行为等同于file-loader，而当图片不超过限制时，则会将图片以base64的形式打包进css文件，以减少请求次数。
  • limit 控制文件的大小 如: 8*1024表示8k以内转DataURL
  • webpack.config.js
    	const path = require('path');

module.exports = {
    mode: 'development',
    entry: '/src/js/1.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.min.js'
    },
    module: {
        rules: [{
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            },
            {
                test: /\.(jpg|png|gif)$/i,
                use: {
                    loader: 'url-loader',
                    options: {
                        outputPath: 'img/',
                        limit: 8 * 1024,
                        esModule:false
                    }
                },
                type:'javascript/auto'
            }
        ]
    },
}
    注:
    在这里插入图片描述
    • 结果
      • base64
        在这里插入图片描述
      • 正常图片
        在这里插入图片描述

编译es6

  • cnpm i babel-loader @babel/core @babel/preset-env -D
  • webpack.config.js
    const path = require('path');

module.exports = {
    mode: 'development',
    entry: '/src/js/1.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.min.js'
    },
    module: {
        rules: [{
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            },
            {
                test: /\.(jpg|png|gif)$/i,
                use: {
                    loader: 'url-loader',
                    options: {
                        outputPath: 'img/',
                        limit: 8 * 1024,
                        esModule: false
                    }
                },
                type: 'javascript/auto'
            },

            {
                test: /\.jsx?$/i,
                exclude: '/node_modules/', //不编译 node_modules
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ["@babel/preset-env", {
                                "targets": {
                                    "browsers": ["> 1%", "last 2 versions"]
                                }
                            }]
                        ],
                    }
                }
            },
        ]
    },

}
  • 1.js
    import '../css/main.css';


let a = 12;
let b = 15;

const sum = (n1, n2) => {
    return n1 + n2;
}

alert(sum(a, b));
  • 编译结果
    在这里插入图片描述

source-map 查看在源文件中错误的位置

  • 在这里插入图片描述
  • 1.js
    import '../css/main.css';


let a = 12;
let b = 15;

const sum = (n1, n2) => {
    return n1 + n2;
}

alert(sum(a, c));
  • 结果
    在这里插入图片描述

代码风格管理 eslint

  • 安装：cnpm i eslint eslint-loader -D
  • 配置文件 .eslintrc
    {
    "root": true, 
    "parserOptions":{
        "sourceType": "module",
        "parser": "babel-eslint",
        "ecmaVersion": 2015
    },
    "env": {
        "browser": true
    },
    "rules": {
        "indent": ["error", 2],//缩进, 两个空格
        "linebreak-style":["error","windows"],//换行 
        "quotes": ["error", "double"],//引号 都是双引号
        "semi": ["error", "always"],//结尾  必须分号
        "no-console": "error",
        "arrow-parens": 0
    }
}
  • webpack.config.js
    const path = require('path');

module.exports = {
    mode: 'development', //模式
    entry: './src/js/1.js', //入口
    //出口
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.min.js'
    },
    module: {
        rules: [{
            test: /\.jsx?/i,
            loader: 'eslint-loader',
            exclude: '/node_modules/',
            options: {
                esModule: false
            }
        }]
    },

    devtool: 'source-map'
}
  • 1.js
    let a = 12;
let b = 50;

const sum = (n1, n2) => {
  return n1 + n2;
};

alert(sum(a,b));

dev-server

  • 作用：这个工具不仅能帮我们打包，还能帮我们起了服务器。还能帮我们自动打开浏览器，还能自动更新
  • 安装 cnpm i webpack webpack-cli webpack-dev-server -D
  • 案例：
    const path = require('path');

module.exports = {
    mode: 'development',
    entry: '/src/js/1.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.min.js'
    },
    module: {
        rules: [{
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            },
            {
                test: /\.(jpg|png|gif)$/i,
                use: {
                    loader: 'url-loader',
                    options: {
                        outputPath: 'img/',
                        limit: 8 * 1024,
                        esModule: false
                    }
                },
                type: 'javascript/auto'
            },

            {
                test: /\.jsx?$/i,
                exclude: '/node_modules/', //不编译 node_modules
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ["@babel/preset-env", {
                                "targets": {
                                    "browsers": ["> 1%", "last 2 versions"]
                                }
                            }]
                        ],
                    }
                }
            },
        ]
    },
    devtool:'source-map',

    // 配置 webpack-dev-server
    devServer:{
        // 新版本 webpack 不支持 contentBase 应添加下面这段话,已显示目录
        static:{
            directory:__dirname,
        },
        open:true  // 是否自动打开浏览器
    }
}
成长路上都是孤独的
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack详解
qq_43743402的博客
03-24 6万+
一、什么是webpack 1、官方解释：从本质上来讲，webpack是一个现在的javaScript应用的静态模块化打包工具。（从两点概括这句话即模块和打包） 下面来说一下模块和打包的概念！ 2、前端模块化： 前端模块化的一些方案：AMD、CMD、CommonJS、ES6（浏览器不能识别它们，但是webpack可以做它们的底层支撑，方可进行模块化开发） ES6之前，要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发 并且在通过模块化开发完成了项目后，还需要处理模块化间的各种依赖，并且将
webpack配置
m0_60505147的博客
10-09 1万+
webpack是前端的打包工具打包的工作内容是什么扫描项目，生成整个项目所有模块的依赖关系，根据配置对模块进行合并，生成一个单独的文件。修改html文件，让html文件引用生成后的文件将浏览器无法直接识别的（less、sass、ts）文件，转换成浏览器可以实现的内容。将浏览器暂时无法支持的JS新的语法转换成浏览器可以支持的语法。
webpack看这一篇就够了
热门推荐
一个前端开发者
06-20 5万+
能够理解webpack基本概念和作用能够掌握webpack使用步骤能够使用webpack相关配置能够使用webpack开发服务器能够查阅使用webpack中文文档webpack官网现代 javascript 应用程序的 静态模块打包器 (module bundler)为要学的 vue-cli 开发环境做铺垫把很多文件打包整合到一起, 缩小项目体积, 提高加载速度其中功能:less/sass -> cssES6/7/8 -> ES5 处理js兼容支持js模块化处理css兼容性html/css/js -> 压缩
Webpack
yyj_ZS的博客
12-23 2352
什么是Webpack? Webpack 是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式,将各种静态资源视为模块,并从它生成优化过的代码。 Webpack 可以从终端、或是更改 webpack.config.js 来设置各项功能。 要使用 Webpack 前须先安装 Node.js。(以上介绍来自百度,看着懵逼的话可以看我下边自己总结的) Webpack是前端的一个自动...
浅析webpack的原理
wsx1212123的博客
03-15 8750
一、前言 ​ 现在随着前端开发的复杂度和规模越来越大，鹰不能抛开工程化来独立开发，比如：react的jsx代码必须编译后才能在浏览器中使用，比如sass和less代码浏览器是不支持的。如果摒弃这些开发框架，开发效率会大幅下降。 在众多前端工程化工具中，webpack脱颖而出成为了当今最流行的前端构建工具。 二、webpack的原理 知其然知其所以然。 1、核心概念 （1）entry：一个可执行模块或者库的入口。 （2）chunk：多个文件组成一个代码块。可以将可执行的模块和他所依赖的模块组合成一
webpack打包
qq_46199553的博客
01-10 8787
1.1 webpack 是什么 webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。 1.2 webpack 五个核心概念 1.2.1 Entry 入口(Entry) 指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。 1.2.2 Output 输出(Out
webpack stats
qq_41402809的博客
04-22 1666
什么是stats stats 主要包含了webpack在编译源代码时的一些模块统计信息。这些统计数据可以用来分析应用程序的依赖关系图，也可以用来优化编译速度。 webpack 有一些特定的预设选项给stats 输出： 预设 可选值 描述 ‘errors-only’ none 只在发生错误时输出 ‘errors-warnings’ none 只在发生错误或有新的编译时输出 ‘minimal’ none 只在发生错误或新的编译开始时输出 ‘none’ false 没有输出 ‘no
初识webpack
kgjfk的博客
02-22 1111
初识webpack 1.webpack是什么？ webpack是一个模块打包工具，推出之初是专为js打包而设计，随着前端的发展和技术的更新，webpack的功能也越来越完善，现在已经发展为可识别任何引入模块。 2.什么是webpack-cli？ webpack的安装和运行都是通过命令来实现，而webpack-cli就相当于一个管家，对webpack的命令进行管理和检查，只有webpack-cli识别的命令才能起作用。 3.通过命令安装webpack 安装webpack之前，我们需要先在终端输入node -v
webpack基本的配置
读心悦
07-06 3171
现在的前端，出现很多种可以提高开发效率的工具和框架，但是源码却不能直接运行，只有通过转换之后才能正常运行。那么构建就是把源码转化为可以执行的JavaScript、HTML和CSS代码。
webpack_react
09-18
Webpack 和 React 是现代前端开发中的两个重要工具。Webpack 是一个模块打包器，它将应用程序视为由各种模块组成的，然后将这些模块打包成一个或多个浏览器可执行的文件。React 则是一个用于构建用户界面的 ...
webpack.zip
01-28
Webpack 是一个现代JavaScript应用程序的模块打包工具，它将各种资源（如JavaScript、CSS、图片等）视为模块，并将它们转换和打包成优化过的静态资源，以便在浏览器中高效地运行。这个压缩包“webpack.zip”包含了对...
webpack安装包
11-24
Webpack 是一个前端资源模块化和打包工具，它允许开发者将应用程序分解为小块（模块），然后根据需要在浏览器中加载这些模块。Webpack 的核心概念是“一切皆模块”，包括 HTML、CSS、JavaScript 以及图片等静态资源...
Vue.js 框架兼容 Internet Explorer (IE) 浏览器指南
qq_42072014的博客
08-06 806
通过以上步骤，你现在已经了解了如何确保Vue.js应用在IE11浏览器上正常运行。需要注意的是，支持IE可能会增加额外的工作量，尤其是在处理一些现代Web API时。如果可能的话，考虑逐步减少对IE的支持，转而专注于现代浏览器，以简化开发流程并提高应用性能。
Webpack插件
yang295242361的博客
08-06 363
/在chainWebpack中新增以下代码，大概是config.module.rule('images')..loader('image-webpack-loader')一些性能开销较大的loader前面添加cache-loader，将结果缓存在磁盘中减少编译时间。loader，如：（css-loader 、vue之前添加 cache-loader，）//使用场景：设置false，对流量不必要的损耗。//用于标记页面加载后即将用到的资源，浏览器将在主体渲染前加载preload标记文件。
React快速开发框架
最新发布
selectDele的博客
08-06 447
快速搭建项目webpack+react+react-router+typescript
Webpack中文完全指南
"Webpack中文指南提供了对webpack的全面介绍，包括安装、使用、配置、Loader、插件、开发环境设置以及故障处理等。该指南详细解释了如何利用webpack进行前端资源的模块化管理和打包，支持多种模块规范如CommonJS、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值