webpack基础

webpack-基础

貌似这些属于编译原理的内容。

当时看了一点编译原理,当中的自动机,彻底懵。

不过大概了解了一点内容。感觉webpack一个打包工具非常类似于一个编译器,将一个文件,转换为另外一个文件。

一些概念

入口

入口,即寻找入口文件的及其依赖项的文件。即编译前的文件

配置文件为webpack.config.js中修改为

module.exports = { 
  entry: "./app.js"
}

使用这个可以设置入口文件为./app.js由该文件,可以寻找相关的依赖

出口

output告诉要生成那些文件

const path = require("path");

module.exports = { 
  entry: "./app.js",
  output: {
  	filename: "my-first-webpack.js"
  }
}

导出该文件

loader

loader可以让webpack处理非js文件。

  module: {
  	rules: [
  		{test: /\.txt$/, use: 'raw-loader'}	// 再遇到txt文件的时候,需要使用ras-loader进行转换一下 
  	]
  }

遇到txt文件的时候,需要使用raw-loader进行转换

类似于express中的中间件

raw-loader表示将文件作为字符串进行读取

插件

即打包,优化,定义环境中的变量等。

  plugins: [
  	new HtmlWebpackPlugin({template: './src/index.html'})
  ]

入口文件

const config = {
	entry: './file.js',	// 定义入口文件
}

module.exports = config;

分离应用程序和第三方库

const config = {
	entry: {
		app: './src/app.js',
		vendors: './src/vendors.js'
	}
}

module.exports = config;

在上方中webpack会根据app和vendors分别创建两个互相没有任何依赖的依赖图,进行打包

在平常中,一个html文档,只使用一个入口文件。

出口

如何写出编译后的文件。

const config = {
	entry: {
		app: './src/app.js',
		vendors: './src/vendors.js'
	},
	output: {
		filename: 'bundle.js',	// 文件名称
		path: '/home/assets'	// 输出后的绝对路径
	}
}

module.exports = config;
const config = {
	entry: {
		app: './src/app.js',
		vendors: './src/vendors.js'
	},
	output: {
		filename: '[name].js',	// 文件名称,name为对象名,输出的文件为app.js vendors.js
		path: '/home/assets'	// 输出后的绝对路径
	}
}

module.exports = config;

出口,即编译完成后生成的文件

load

load为代码转换,可以使用这个加载css文件,使用这个将typeScript转为JavaScript

安装

npm install --save-dev ts-loader
const config = {
	entry: {
		app: './app.js'
	},
	output: {
		filename: '[name].js',	// 文件名称,name为对象名,输出的文件为app.js vendors.js
		path: '/home/assets'	// 输出后的绝对路径
	},
	module: {
		rules: [
			{test: /\.ts$/, use: 'ts-loader'}
		]
	}
}

module.exports = config;

使用这个可以在打包的时候,将ts文件转为js文件。

插件

创建同名的js文件

这里的是apply()函数。

const pluginName = "ConsoleLogOnBuildWebpackPlugin"

class ConsoleLogOnBuildWebpackPlugin {
	apply(){
		console.log('构建开始');
	}
}

使用插件

const webpack = require('webpack');	// 访问内置插件

const config = {
	entry: {
		app: './app.js'
	},
	output: {
		filename: '[name].js',	// 文件名称,name为对象名,输出的文件为app.js vendors.js
		path: '/home/assets'	// 输出后的绝对路径
	},
	module: {
		rules: [
			{test: /\.ts$/, use: 'ts-loader'}
		]
	},
	plugins: [
		new webpack.optimize.UgifyJsPlugin(),
		new ConsoleLogOnBuildWebpackPlugin()
	]
}

module.exports = config;

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

ASP.NET2.0应用中定制安全凭证之实践篇

一、方案架构   本方案架构很简单——它用一个Web服务来包装ASP.NET 2.0提供者并且为远程客户暴露该凭证管理,你甚至还能在该架构中加上一些失去的功能。...

20280
来自专栏互联网杂技

react+redux+webpack教程5

现在项目已经有了,但是要把它放到生产环境中还是有些事情要做,在这最后一节,来把它们一一搞定。 这一节其实更多是关于webpack的内容。不过要想把react用得...

353110
来自专栏Java成长之路

jsonp详解

说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义...

29640
来自专栏iOSDevLog

插件捆绑目录

29860
来自专栏编程

小白爬虫之爬虫快跑,多进程和多线程

使用多线程时好像在目录切换的问题上存在问题,可以给线程加个锁试试 Hello 大家好!我又来了。 你是不是发现下载图片速度特别慢、难以忍受啊!对于这种问题 一般...

22670
来自专栏前端说吧

Gulp安装流程、使用方法及cmd常用命令导览

45560
来自专栏张善友的专栏

分布式文件存储的数据库开源项目MongoDB

MongoDB是一个基于分布式文件存储的数据库开源项目。由C++语言编写。旨在为WEB应用提供可护展的高性能数据存储解决方案。 它的特点是高性能、易部署、易使用...

38490
来自专栏专注于主流技术和业务

axios2教程

axios 是一个基于 promise 的 HTTP 库,用于浏览器和node.js的http客户端,支持拦截请求和响应,自动转换 JSON 数据, 客户端支持...

1.1K20
来自专栏木子昭的博客

精析Python3实现动态web服务(附服务端源码)如果我们提供一个动态网站服务,至少应考虑以下四点:一个优秀的动态web框架应该是这样的:关于WSGI标准WIGS模型的要点:实现源码小结:

实现一个简单的静态web网站,只需将写好的html页面上传到特定的web服务器软件即可,但静态网页其实和图片没什么区别,每次更新网站内容,都需要重新制作htm...

387120
来自专栏Seebug漏洞平台

WordPress REST API 内容注入漏洞分析

0x00 漏洞简述 1. 漏洞简介 在REST API自动包含在Wordpress4.7以上的版本,WordPress REST API提供了一组易于使用的HT...

32670

扫码关注云+社区

领取腾讯云代金券