您现在的位置是:首页 > 正文

webpack的使用方法

2024-01-30 22:54:59阅读 0

webpack笔记

1、webpack的安装和使用

一、webpack

	模块化打包工具

二、安装webpack
	
	2.1 先全局安装

		cnpm install webpack -g
		cnpm install webpack-cli -g

		cnpm i webpack webpack-cli -g

	2.2 测试版本

		webpack -v
		webpack-cli -v     cli是脚手架的内容

三、简单用一下webpack

	webpack==》本身之前是打包js

		如果要打包:html 、css ... 需要借助cli,添加一些配置文件

	1. 进入项目目录,在src文件夹下创建index.js文件

		src/index.js

	2. 在该目录中下载webpack

		cnpm install webpack -S

	3. 在终端执行:webpack,就会打包成功

	打包好的文件放在dist/main.js中,没有空格换行注释等

2、webpack的入口和输出

一、入口文件:指示webpack使用哪个模块

	默认:src/index.js

二、出口文件

	默认:dist/main.js

3、多文件的打包

一、多文件打包成一个文件 ,使用数组
	
	问题:多个入口文件 ===》 单文件出口
	解决:entry: ['./src/a.js','./src/b.js']

二、多文件打包成多文件 ,使用对象

	问题:多个入口文件 ===》 多文件出口
	解决:entry: {
		  	a:'./src/a.js',
		  	b:'./src/b.js'
	 	},

4、loader工具的使用

一、loader是什么

	webpack本身只能理解 JavaScript 和 JSON 文件,不支持css等其他类型的文件:
	loader 可以让 webpack 能够去处理其他类型的文件(比如html,css),并将它们转换为有效模块,以供应用程序使用,以及被添加到依赖图中。

	如果不进行以下配置,webpack是打包js的,不支持css,会报错

二、loader的配置
	
	写法:
		module: {
		    rules: [{ 
		    	test: /\.css$/, 
		    	use: ['style-loader','css-loader']
			}]
		}

	1、test 属性,识别出哪些文件会被转换。如:test: /\.css$/

	2、use 属性,定义出在进行转换时,应该使用哪个 loader。

	****一定要记住下载loader
	下载举例:
		cnpm install style-loader css-loader -s

	webpack中的loader有哪些?(非常多)
		sass.loader
		html.loader
		file.loader
		ts.loader等

5、html打包

插件:html-webpack-plugin 

	***参考网站:https://www.cnblogs.com/wonyun/p/6030090.html
	
补充:cnpm install
	根据package.json中的依赖项,进行全部的下载,不需要一个一个install

使用步骤:

	1. 下载插件

		cnpm install html-webpack-plugin -S

	2. 引入插件

		var HtmlWebpackPlugin = require('html-webpack-plugin');

	3. 配置

		plugins: [
	        new HtmlWebpackPlugin()
	    ]

    4. 参数说明

    	4.1 指定模版页面

    		template:'./src/index.html'

    	4.2 修改默认输出文件名

    		filename:'index.html'

    	4.3 允许注入到模板中的chunk

    		chunks:['jquery','xx']

    	4.4 不允许注入到模板中的thunk

    		excludeChunks:['xx']

    5. 多页面打包

    	需要创建多个new HtmlWebpackPlugin

	

6、在html中加入图片

一、加载图片的loader ==> file-loader

	{
	    test: /\.(png|jpg|jpeg|gif)$/, 
	    use: [{
	        loader:'file-loader',
	        options:{
	          esModule:false,
	          outputPath:'img/'
	        }
	    }]
	}

二、让html支持图片的loader  ==>  html-withimg-loader

	{
        test: /\.html$/, 
        use: 'html-withimg-loader'
    }

***loader只需要配置,插件需要引入(例如html-webpack-plugin)

7、在html中加入字体图标

添加字体图标的配置:

	{
        test: /\.(eot|svg|ttf|woff|woff2)$/, 
        use: 'file-loader?name=./fonts/[name].[ext]'
    }

8、CSS打包

压缩打包css

1. 单独抽离css文件

	1.1 下载插件: mini-css-extract-plugin

	1.2 引入插件:

		var MiniCssExtractPlugin = require('mini-css-extract-plugin');

	1.3 修改loader:将style.loader换掉

		{ 
			test: /\.css$/, 
			use: [MiniCssExtractPlugin.loader,'css-loader']
		}
		
	1.4 使用插件

		plugins:[
			new MiniCssExtractPlugin()
		]

2. 压缩css文件

	插件: optimize-css-assets-webpack-plugin
		

9、应用案例:项目压缩打包

步骤1:在demo文件夹中新建src文件夹,将要压缩的文件全部放入src文件夹

在这里插入图片描述

步骤2:将每个页面中引入css和js的语句去掉,并在对应的js文件中的进行配置

举例:在index.html对应的index.js文件中,写如下语句:
在这里插入图片描述

注意:每个页面都要进行步骤2,配置好自己的js文件,对html文件进行简化。

步骤3:修改webpack.config.js文件

var path = require('path');
var webpack = require('webpack');//引入webpack,解决$无法识别的问题
var HtmlWebpackPlugin = require('html-webpack-plugin');//引入html插件
var MiniCssExtractPlugin = require('mini-css-extract-plugin');//引入css插件
var OptimizeCssAssetsWebpackPlugin= require('optimize-css-assets-webpack-plugin');//压缩css

module.exports = {
  	entry: {
        //引入每一个页面的js文件
  		index:'./src/js/index.js',
      	about:'./src/js/about.js',
      	curriculum:'./src/js/curriculum.js',
      	product:'./src/js/product.js',
      	student:'./src/js/student.js',
        //引入额外需要的js文件
  		jquery:'./src/js/jquery-1.11.min.js',
  		swiper:'./src/js/swiper-bundle.min.js',
      popup:'./src/js/jquery.popup.min.js'
  	},
  	output: {//生成的输出文件,放在dist文件夹中
   	 	path: path.resolve(__dirname, 'dist')
 	},
  	module: {
	    rules: [
      	{ //css
	    	test: /\.css$/, 
	    	use: [MiniCssExtractPlugin.loader,'css-loader']
		},
      	{//图片
        test: /\.(png|jpg|jpeg|gif)$/, 
        use: [{
            loader:'file-loader',
            options:{
              esModule:false,
              outputPath:'img/'
            }
        }]
      },
      {//字体图标
        test: /\.(eot|svg|ttf|woff|woff2)$/, 
        use: 'file-loader?name=./fonts/[name].[ext]'
      },
      {//html
        test: /\.html$/, 
        use: 'html-withimg-loader'
      }]
	},
	plugins: [
        //解决$符号无法识别的问题
        new webpack.ProvidePlugin({
          $:'jquery',
          jQuery:'jquery',
          'window.jQuery':'jquery'
        }),
        
        //有几个页面,就new几个HtmlWebpackPlugin
        new HtmlWebpackPlugin({
        	//指定模版页面
        	template:'./src/index.html',
        	//修改默认输出文件名
        	filename:'index.html',
        	chunks:['index','jquery','swiper','popup']
        }),
        new HtmlWebpackPlugin({
        	//指定模版页面
        	template:'./src/about.html',
        	//修改默认输出文件名
        	filename:'about.html',
        	chunks:['about','jquery']
        }),
        new HtmlWebpackPlugin({
          //指定模版页面
          template:'./src/curriculum.html',
          //修改默认输出文件名
          filename:'curriculum.html',
          chunks:['curriculum','jquery','swiper']
        }),
        new HtmlWebpackPlugin({
          //指定模版页面
          template:'./src/product.html',
          //修改默认输出文件名
          filename:'product.html',
          chunks:['product']
        }),
        new HtmlWebpackPlugin({
          //指定模版页面
          template:'./src/student.html',
          //修改默认输出文件名
          filename:'student.html',
          chunks:['student','jquery']
        }),
        
        //分离css
        new MiniCssExtractPlugin({
          filename:'./css/[name].css',
        }),
        //压缩css
        new OptimizeCssAssetsWebpackPlugin()
    ]
};

注意:有几个页面,就new 几个 HtmlWebpackPlugin,每一个页面都要进行配置。

网站文章

  • XML标记语言:标签和语法规则、利用dom4j对XML进行解析、XML的DTD约束和schema约束;自定义枚举;自定义注解和元注解

    XML标记语言:标签和语法规则、利用dom4j对XML进行解析、XML的DTD约束和schema约束;自定义枚举;自定义注解和元注解

    XML标记语言:标签和语法规则、利用dom4j对XML进行解析、XML的DTD约束和schema约束;自定义枚举;自定义注解和元注解

    2024-01-30 22:54:53
  • 其实你也可以使用SpringBoot自定义starter

    其实你也可以使用SpringBoot自定义starter

    使用过SpringBoot的都应该知道,一个SpringBoot 项目就是由一个一个 Starter 组成的,一个 Starter 代表该项目的 SpringBoot 启动依赖,除了官方已有的 Sta...

    2024-01-30 22:54:26
  • 快速排序为什么要从右边开始

    为什么要从右边开始:假如对 6 1 2 7 9进行从小到大的排序,6作为基准数,如果从左边开始,i首先到达一个比6大的数,这个数为7,这时候再从左边走,但这时7到最后一个数之间已经没有比6小的数,所以...

    2024-01-30 22:54:19
  • 《TensorFlow深度学习》(七)——Keras高层接口

    《TensorFlow深度学习》(七)——Keras高层接口

    Keras 是一个主要由Python 语言开发的开源神经网络计算库,最初由François Chollet编写,它被设计为高度模块化和易扩展的高层神经网络接口,使得用户可以不需要过多的专业知识就可以简洁、快速地完成模型的搭建与训练。本文学习tf.keras

    2024-01-30 22:54:12
  • 详解基于MATLAB的车牌识别系统设计与实现(1):车牌定位

    详解基于MATLAB的车牌识别系统设计与实现(1):车牌定位

    车牌识别系统主要包括车牌定位、字符分割和字符识别三个核心模块。车牌定位是利用车牌的颜色和形状特征确认并获取汽车的车牌位置;字符分割是将获取到的车牌切割成单个字符;字符识别目前主要有基于模板匹配算法和基于人工神经网络算法对切割的字符进行识别。本节内容主要讲解车牌定位,主要内容有:读取图像预处理边缘检测形态学操作定位裁剪主函数代码如下 :// main.mclose all;cle...

    2024-01-30 22:53:41
  • ACPI电源管理的6个状态(S0-S5) 热门推荐

    ACPI 电源管理的6个状态:S0: 主机正常工作状态S1: CPU停止工作,wakeup时间为:0sS2: CPU关闭,wakeup时间为:0.1sS3: 主机中除了内存以外其他所有部件都停止工 作,wakeup时间为:0.5sS4: 主机将内存中的信息写入到硬盘中,之后关闭所有组件,wakeup时间为:30sS5: 关机

    2024-01-30 22:53:33
  • Servlet Cookie取不到值原因

    现象: 在测试带Cookie的HTTP请求时发现,服务端用request.getHeader("cookie")可以去到值;但是用request.getCookies()却不行Co...

    2024-01-30 22:53:16
  • Java中的类与变量

    一、静态 1、类的静态成员与类直接相关,与对象无关,在一个类的所有实例之间共享同一个静态成员,该类的对象共享其静态成员变量的值 2、静态成员函数中不能调用非静态成员,静态成员变量可被该类的所有方法访问...

    2024-01-30 22:52:48
  • 网络安全,别报!!!

    网络安全,别报!!!

    网络安全究竟要不要报?7年网工如是说

    2024-01-30 22:52:38
  • 思考R-CNN的一些问题,如何提取特征,分类,训练,测试

    思考R-CNN的一些问题,如何提取特征,分类,训练,测试

    1.R-CNN是什么 论文链接 把region proposal和CNNs结合起来,所以该方法被称为R-CNN:Regions with CNN features,整个检测系统有三个模块构成。 第一个...

    2024-01-30 22:52:31