webpack----js的静态模块打包器

博客说明

文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!

简介

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle,默认webpack只能理解javascript文件。

官方文档

https://www.webpackjs.com/

安装

cnpm i webpack -g //--save(加载到项目依赖)

使用

设置入口

使用webpack需要一个入口文件,也就是入口起点,进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的

创建配置文件

需要创建配置文webpack.config.js

module.exports = {
entry: './src/lib/index.js'
};

设置出口

output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist

module.exports = {
entry: './src/lib/index.js'
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'webpack-name.bundle.js'
}
};

处理非js文件

webpack使用的是loader,loader 可以让 webpack 能够去处理那些非 JavaScript 文件。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块

module.exports = {
entry: './src/lib/index.js'
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'webpack-name.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};

插件

插件则可以用于执行范围更广的任务

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
module.exports = {
entry: './src/lib/index.js'
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'webpack-name.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};

感谢

webpack

以及勤劳的自己

webpack----js的静态模块打包器的更多相关文章

  1. js模块化/js模块加载器/js模块打包器

    之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7 ...

  2. webpack前端模块打包器

    webpack前端模块打包器 学习网址: https://doc.webpack-china.org/concepts/ http://www.runoob.com/w3cnote/webpack-t ...

  3. Webpack - CommonJs & AMD 模块打包器

    Webpack 是一个 CommonJs & AMD 模块打包器.可以把你的 JavaScript 代码分离为多个包,在需要的时候进行加载,支持预处理文件,例如 json, jade, cof ...

  4. Webpack的基本配置和打包与介绍

    1. 前言 1.1 Webpack是什么 可能有很多的小伙伴对于这个Webpack既熟悉又陌生,有一些刚开始接触vue的小伙伴在对项目进行打包的时候经常会使用到npm run build来进行打包,但 ...

  5. webpack打包器简单入门

    概念 webpack是一个现代javascript应用程序的模块打包器. 当webpack处理你的应用程序时,它会递归构建一个依赖图(包含了你的应用程序所需要每个模块),然后把这些模块打包到少数几个b ...

  6. webpack快速入门——CSS文件打包

    1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...

  7. Webpack--模块打包器

    首先介绍一个安装webpack的百度经验:https://jingyan.baidu.com/article/a3a3f811230ee58da3eb8a6e.html 推荐一个详细介绍webpack ...

  8. Webpack: 为Web开发而生的模块管理器[转]

    Webpack: 为Web开发而生的模块管理器 原文地址:http://hanjianwei.com/2014/09/10/webpack-package-manager-for-web/ 10 Se ...

  9. 浅谈Webpack模块打包工具一

    为什么要使用模块打包工具 1.模块化开发ES Modules存在兼容性问题 打包之后成产阶段编译为ES5 解决兼容性问题 2.模块文件过多 网络请求频繁  开发阶段把散的模块打包成一个模块 解决网络请 ...

随机推荐

  1. Atlas运行时资源不足报错 -bash: fork: retry: 资源暂时不可用 Out of system resources

    目的:运行Atlas并使用Azkaban执行操作任务 环境:Centos 6 内存大小:12G 启动下面的任务后还剩内存将近5G 问题: 当mysql_to_hdfs_db和其他job同时运行时集群很 ...

  2. 食物链 POJ - 1182 (并查集的两种写法)

    这是一个非常经典的带权并查集,有两种写法. 1 边权并查集 规定一下,当x和y这条边的权值为0时,表示x和y是同类,当为1时,表示x吃y,当为2时,表示x被y吃. 一共有三种状态,如图,当A吃B,B吃 ...

  3. 设计模式 - 模板方法模式详解及其在Spring中的应用

    基本介绍 模板方法模式(Template Method Pattern)也叫模板模式,它在一个抽象类中公开定义了执行它的方法的模板,它的字类可以按需重写方法实现,但调用将以抽象类中定义的方式进行. 简 ...

  4. [转+自]关于PHP7的新特性(涉及取反和disabled_functions绕过)

    PHP7和PHP5上的安全区别 preg_replace()不再支持/e修饰符 利用\e修饰符执行代码的后门大家也用了不少了,具体看官方的这段描述: 如果设置了这个被弃用的修饰符, preg_repl ...

  5. react typescript jest config (一)

    1. initialize project create a folder project Now we'll turn this folder into an npm package. npm in ...

  6. pytorch中CUDA类型的转换

    import torch import numpy as np device = torch.device("cuda:0" if torch.cuda.is_available( ...

  7. MySQL中出现Unknow column 'xx' in field list的解决办法

    首先创建一个表,然后插入数据发现出错误 经过多次尝试发现title前面多了一个空格 我们把空格去掉,然后在插入数据,发现数据创建成功

  8. Netty源码分析之ChannelPipeline—异常事件的传播

    ChannelHandler中异常的获取与处理是通过继承重写exceptionCaught方法来实现的,本篇文章我们对ChannelPipeline中exceptionCaught异常事件的传播进行梳 ...

  9. Junit借助Groboutils Core进行并发测试

    本文参考:http://www.voidcn.com/article/p-ybnvuffh-ke.html:转载请注明出处 junit是无法进行并发测试,但是又有需要并发测试的场景怎么办呢?此时可以借 ...

  10. js 之 object

    js之object 对象 ECMA-262 把对象(object)定义为“属性的无序集合,每个属性存放一个原始值.对象或函数”.严格来说,这意味着对象是无特定顺序的值的数组. 尽管 ECMAScrip ...