随笔 - 22  文章 - 0 评论 - 1 阅读 - 7840
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

webpack

webpack,是一款模块加载器兼打包工具.能将 JS、coffee、less、sass、图片等作为模块来使用.
经过一个多月的摸索,姑且算是入门了.因此重新写个小DEMO来加深自己对 webpack 的理解.

安装webpack

$ npm install webpack -g

跟gulp一样.webpack也有一个默认的配置文件,名为 webpack.config.js

该配置文件里,可以以 commonJS 的方式去写

module.exports = {
	entry: {
		//	入口文件
		index: './index.js'
	},
	output: {
		path: 'dist',
		//	编译后的入口文件
		filename: 'index.js'
	}
}

这样即可在 index.js 里进行编码,js里可以采用 commonJS模块化进行开发.

在webpack里 使用ES6

首先应当先下载好 ES6的依赖包

$ npm install --save-dev babel-preset-es2015
$ npm install --save-dev babel-core
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-loader

在目录里新建.babelrc

所有的babel模块或工具都需要先写好 .babelrc

{
	"presets": [
		"es2015",
		"stage-2"
	]
}

webpack.config.js里添加以下代码

module: {
	//	加载器配置
	loaders: [
		{test: /\.js$/, loaders: ['babel'], exclude: /node_modules/},
		{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
	]
}

module.loaders 是告诉 webpack 每一种文件需要使用什么加载器,多个加载器可以通过 ! 来连接 -loader可省略不写

运行 webpack

$ webpack --config xxx.js	//	使用该配置文件进行打包
$ webpack --watch	//监听文件并自动打包
$ webpack -p	//压缩打包文件
$ webpack -d	//生成map文件

loader 介绍

style-loader

将 style 添加到页面中

css-loader

对CSS 进行打包

{test: /\.css$/, loader: 'style!css'}

sass-loader

对 scss文件进行编译以及打包

{test: /\.scss$/, loader: 'style!css!sass'}

url-loader

对图片进行处理,符合条件的直接转为 base64

{test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}

!!!当 webpack 第一次使用以上 loader 时,将会给出报错以及提示缺少哪些module,到时候直接对着错误信息进行安装对应的模块即可

独立打包样式

有的时候 我们不希望将 css 代码写到 js里,而是另外独立写个.css文件,这个时候我们需要 extract-text-webpack-plugin

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractSCSS = new ExtractTextPlugin('style.css');

module.exports = {
	...
	module: {
		loaders: [
			{test: /\.scss$/, loader: extractSCSS.extract(['css','sass'])},
		]
	}
	plugins: [extractSCSS]
}

多入口文件提取公共模块

当入口文件有多个的时候,就需要提取出公共文件了.可采用 CommonsChunkPlugin 来提取

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");

module.exports = {
	entry: {
		index: './index.js',
		detail: './detail.js',
		user: './user.js'
	},
	output: {
		path: 'dist',
		filename: '[name].js'
	},
	module: {
		...
	},
	plugins: [
		//	三个入口文件公用 common.js
		new CommonsChunkPlugin('common.js'),
		//	index,detail 公用 common.js
		//	user 公用 admincommon.js
		new CommonsChunkPlugin('common.js', ['index', 'detail']),
		new CommonsChunkPlugin('admincommon.js', ['user'])
	]
}

利用缓存以及自动生成页面

module.exports = {
	...
	output: {
		filename: '[name].[chunkhash:8].js'
	},
	...
}

hash:8 chunkhash:8 可以为文件 添加 长度8位的哈希值

由于jscss文件名的变化,导致html文件里引用的将会失效,可使用HtmlWebpackPlugin来进行自动修改

var HtmlWebpackPlugin = require('html-webpack-plugin');
var extractCSS = new ExtractTextPlugin('style.[chunkhash:8].css');

module.exports = {
	...
	plugins: [
		extractCSS,
		new CommonsChunkPlugin('common.[hash:8].js'),
		new HtmlWebpackPlugin({
			title: 'My App',
			//	文件名称
			filename: 'index.html',
			//	模版位置
			template: 'index.html',
			//	chunks 里写入口文件 common为提取出来的文件 所以得加上哈希值 才能正确插入到html里
			chunks: ['common.[hash:8].js', 'index'],
		})
	],
	...
}

异步加载

我们的webpack里面全靠同步加载JS,有的时候可能会使JS文件加载后很大,从而导致移动端首屏白屏很久.这是不好的体验.
因此我们可采用多个 chunk (代码块),在需要的时候或者异步加载内容

require.ensure([], function(){
	//	加载的JS文件
	require('./xxxxx');
});

webpack-dev-server

这是个基于 Express.js 框架开发的 web server. 默认端口 8080;内部调用了 webpack, 监控到文件的变化并实时刷新页面.使得开发变得更加容易.

$ npm install webpack-dev-server --save-dev	//	安装
$ webpack-dev-server --inline --hot

--inline能为页面添加"热加载"功能,如果代码发生变化,webpack将会自动编译并且刷新页面.使得我们能马上获得最新的页面状态
--hot"热替换(Hot Module Reloading)",即 HRM.当资源发生变化时,webpack会优先进行 热替换,而不是刷新整个页面.只有当 HRM 失效后才会进行"热加载"

module.exports = {
	entry: {
		...
		server: {
			'webpack-dev-server/client?http://0.0.0.0:8080',
			'webpack/hot/only-dev-server'
		}
	}
}

输入

$ webpack-dev-server --inline
$ webpack-dev-server --inline --hot

浏览器打开 localhost:8080 即可查看效果

posted on   小玥光  阅读(260)  评论(0编辑  收藏  举报
编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
· 程序员转型AI:行业分析
点击右上角即可分享
微信分享提示