`
huangyongxing310
  • 浏览: 496112 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

webpack 原理与使用

 
阅读更多
webpack 仍然还是高度可配置的


webpack做的事情主要是实现前端模块化(即:让前端也可以像node端一样适用require方法加载模块)和借助插件实现编译、热加载等功能。

实现原理就是将require的命令就成js可以识别和运行的代码,所以生成的代码会将requir的模块变成函数并运行它(生成的文件会在前部有一个webpackbootstrap代码段)



当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。


https://www.webpackjs.com/concepts/

入门
http://www.runoob.com/w3cnote/webpack-tutorial.html

先理解四个核心概念:
入口(entry)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。

输出(output)属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。

loader,loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。
本质上,webpack loader 将所有类型的文件,转换为应用程序的依赖图(和最终的 bundle)可以直接引用的模块。

插件(plugins)
loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务
想要使用一个插件,你只需要 require() 它,然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用 new 操作符来创建它的一个实例。


webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;



module
以上配置中,对一个单独的 module 对象定义了 rules 属性,里面包含两个必须属性:test 和 use。这告诉 webpack 编译器(compiler) 如下信息:

“嘿,webpack 编译器,当你碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时,在你对它打包之前,先使用 raw-loader 转换一下。”



模式
通过选择 development 或 production 之中的一个,来设置 mode 参数,你可以启用相应模式下的 webpack 内置的优化

module.exports = {
  mode: 'production'
};



webpack 配置是标准的 Node.js CommonJS 模块


Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。


//-------------------------------------------------
例子:
建目录appTest
新建文件
app/index.html 文件
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>


app/runoob1.js 文件
document.write("It works.");


app/webpack.config.js 文件(webpack打包配置文件,要不要在命令中输入相关参数,有了这个文件就只要输入webpack就可以了)
module.exports = {
    entry: "./runoob1.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    mode: development
};


//-------------------------------------------------


多文件入口:
module.exports = {

  entry: {     //  入口

    bundle1: './main1.js',    //  第一个JS文件

    bundle2: './main2.js'    //  第二个JS文件

  },

  output: {

    filename: '[name].js'    //   输出文件命名

  }

};
























分享到:
评论

相关推荐

    webpack视频教程及源码百度云盘下载地址

    ### Webpack视频教程及源码知识点详解 #### 一、Webpack简介 Webpack是一款现代JavaScript应用程序的模块打包器。它能够将多个模块(如JavaScript文件、样式表、...希望本篇介绍能帮助大家更好地理解和使用Webpack。

    Webpack原理剖析.zip

    webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含...这是一份原理分析的资料,有需要的可以下载查看

    webpack的基本原理及手动配置webpack的详细步骤

    以及我在手动配置webapck的时候遇到的一些问题以及解决方法,里面的内容主要有前端工程化,webpack的基本使用,webpack中的插件,webpack中的loader,打包发布,Source Map以及在浏览器中安装vue-devtools调试工具。...

    webpack打包教程.zip_webpack打包原理vue

    Webpack 是一个强大的模块打包工具,尤其在前端开发中被广泛使用。它的工作原理是将JavaScript、CSS、图片等资源视为“模块”,通过一系列配置和插件进行编译、打包,生成适合生产环境的静态资源。在Vue.js项目中,...

    WebPack的高级使用

    在深入探讨Webpack的高级使用之前,我们先理解其基本概念和工作原理。 Webpack 的核心概念包括: 1. **模块**:Webpack 视任何可以导入的东西为模块,不只是 JavaScript,CSS、图片等都可以作为模块。 2. **加载器...

    webpack开发环境和生产环境切换原理.docx

    今天,我们将深入探讨 Webpack 开发环境和生产环境切换原理,了解如何使用 Webpack 实现环境切换。 一、环境变量的概念 在编程中,环境变量是一种存储在系统中的变量,它可以被程序访问和修改。环境变量通常用于...

    webpack-UI组件使用

    Webpack 是一个静态模块打包工具,它的工作原理是将项目中的各种模块(包括JavaScript、CSS、图片等)通过loader和plugin进行处理,并将其打包成一个或多个可部署的静态资源。Webpack的核心概念包括Entry(入口)、...

    webpack的学习案例

    在生产环境中,Webpack 提供一系列优化策略,如代码分割(SplitChunksPlugin)、 Tree Shaking(消除未使用的代码)、SourceMap(便于调试)等,以实现最小化输出文件、提升性能的目标。 通过以上讲解,我们已经...

    深入浅出webpack

    深入理解Webpack的工作原理,包括模块的解析、编译、加载和打包过程,有助于你更好地定制Webpack配置。Webpack将所有资源视为模块,通过Loader转换它们,然后用Plugin处理特定场景,最后生成最终的bundle。理解这些...

    webpack原理与实战

    webpack是一个js打包工具,不一个完整的前端...在深入实战前先要知道webpack的运行原理 entry一个可执行模块或库的入口文件。 chunk多个文件组成的一个代码块,例如把一个可执行模块和它所有依赖的模块组合和一个chunk

    webpack基础使用,实现隔行变色效果

    Webpack 是一个流行的模块打包工具,它能够将 JavaScript、CSS、图片等资源文件转换并整合到一起,便于构建复杂的...通过学习这个项目,你可以更好地理解 Webpack 的工作原理,以及如何利用它来管理和构建前端项目。

    Webpack打包实例测试代码

    在这个“Webpack打包实例测试代码”中,我们将深入探讨Webpack的工作原理和配置细节。 首先,Webpack的核心概念是“模块”。在JavaScript世界里,模块是一种组织代码的方式,Webpack能够识别和处理这些模块,并根据...

    Webpack4中文手册(4.39.3).pdf

    指南部分可能涵盖如下内容:Webpack的工作原理,核心概念如entry、output、loader、plugin等,以及如何开始进行项目配置。 Webpack中文手册的内容非常丰富,它为使用Webpack的开发者提供了详尽的参考。从基础配置到...

    webpack 样式加载的实现原理

    webpack 样式加载的实现原理是通过使用css-loader和style-loader两个loader来实现的。css-loader将@import和url处理成正规的ES6 import,如果@import指向的是一个外部资源,css-loader会跳过,而只会对内部资源做...

    基于webpack-不使用任何脚手架-创建纯粹的webpack项目-源码

    习惯了使用各种脚手架,...源码提供只基于webpack的单一组件的编译流程,学习认识webpack的原理。 “基于webpack-不使用任何脚手架-创建纯粹的webpack项目”的文章参考 https://articles.zsxq.com/id_bw5w2zw6bs13.html

    Python爬虫,JS逆向之 webpack 打包站点原理与实战

    Python爬虫,JS逆向之 webpack 打包站点原理与实战

    webpack

    Webpack 是一个现代JavaScript应用程序的模块打包工具。它将项目中的各种资源(如JavaScript、CSS、图片等)视为模块,通过静态...通过理解并掌握Webpack的基本原理和配置,可以极大地提升前端项目的构建质量和效率。

    webpack4配置demo

    总的来说,Webpack 4的环境搭建涉及多个方面,包括但不限于安装依赖、编写配置文件、理解和使用加载器与插件。通过这个“webpack4配置demo”,开发者可以深入理解Webpack的工作原理,提高前端项目的构建效率,为后续...

    webpack与SPA实践之管理CSS等资源的方法

    首先,了解 webpack 的基本工作原理至关重要。webpack 将应用程序视为由多个模块组成,这些模块可以是 JavaScript、CSS、图片等。它会分析模块之间的依赖关系,并将它们打包成一个或多个可执行的静态资源。对于非 ...

Global site tag (gtag.js) - Google Analytics