webpack

Q:为什么要用webpack?
A:1.当然是方便了开发啊,它的dev server 主力你的本地开发,只要一改代码自动构建编译完成还自动帮你刷新浏览器,这个开发体验谁用谁爽
2.减少请求,提高性能啦。模块按需打包,避免了我们发送很多的http请求去获取资源,而且还要考虑这些资源先来后到的问题

webpack配置

写在前面:官网解释到,webpack 是一个基于node.js的模块打包器。它的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用,但它也能够胜任转换(transform)、打包(bundle)或包裹(package)
https://webpack.docschina.org/guides/getting-started/
(练习放在workspce/demo/webpack_demo)

一些基础知识:

  • 入口(entry) :指示 webpack 应该使用哪个模块,来作为构建其内部 依赖图(dependency graph) 的开始。默认值是 ./src/index.js,但你可以通过在 webpack.config.js 中配置 entry 属性,来指定一个(或多个)不同的入口起点。
  • 输出(output) :告诉 webpack 在哪里输出它所创建的 bundle,以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js,其他生成文件默认放置在 ./dist 文件夹中。
const path = require('path');	//CommonJS语法规范

module.exports = {
  entry: './path/to/my/entry/file.js',	//入口起点,可多入口,默认值是 ./src/index.js
  output: {
  // 我们使用 Node 内置的 path 模块,并在它前面加上 __dirname这个全局变量。可以防止不同操作系统之间的文件路径问题,并且可以使相对路径按照预期工作
    path: path.resolve(__dirname, 'dist'),	//我们想要 bundle 生成(emit)到哪里,path为nodeJS核心模块
    filename: 'my-first-webpack.bundle.js',	//webpack bundle 的名称
    // 还有其他可配置信息 https://webpack.docschina.org/configuration/output/
  },
};
  • loader: webpack 只能理解 JavaScript 和 JSON 文件,这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效 模块,以供应用程序使用。loader 有两个必须属性:test 属性,识别出哪些文件会被转换;use 属性,定义出在进行转换时,应该使用哪个 loader。
	//官方
	const path = require('path');

	module.exports = {
	  output: {
	    filename: 'my-first-webpack.bundle.js',
	  },
	  module: {	  //要定义在 module.rules 而不是 rules 中
	  //当你碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时,在你对它打包之前,先 use(使用) raw-loader 转换一下
	    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
	  },
	};

  // 自己写的扩展
  module: {
    loaders: [
      {
        //key-value形式只能写在对象中
        //style-loader css-loader
        //遇到后缀为.css的文件时,先用css-loader解析main.js,再用style-loader生成一个<style>标签
        test:/\.css$/,          //正则表达式
        loader:"style-loader!css-loader"    //先用css-loader解析main.js,再用style-loader生成一个<style>标签
        // use:['style-loader','css-loader']
      },
      {
        //webpack将各模块打包成一个文件,因此样式中的url路径是相对入口html页面的,而不是相对于原始css文件的路径,会导致图片引入失败。
        // 用file-loader可以解析项目中的url引入
        // 对小图,使用base64编码就可以减少一次图片的网络请求;
        // 而对比较大的图片,若使用base64,编码就会和html混在一起,可读性差,并加大了html页面的大小,该图片也被编译到build.js中了
        test:/\.(jpg|png|jpeg|gif|svg)$/,
        loader:'url-loader?limit=10000'     //带一个参数,与图片大小有关,查询参数limit,大于limit会生成一个base64的编码的jpg文件;小于的化就直接是图片文件
      }
    ]
  }
  • 插件(plugin):loader 用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。包括:打包优化,资源管理,注入环境变量
// 想要使用一个插件,你只需要 require() 它,然后把它添加到 plugins 数组中。
// 多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件,
// 	这时需要通过使用 new 操作符来创建一个插件实例。
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
  // html-webpack-plugin 为应用程序生成一个 HTML 文件,并自动注入所有生成的 bundle
}
  • 模式(mode):通过选择 development, production 或 none 之中的一个,来设置 mode 参数,你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
module.exports = {
  mode: 'production',
}

官方起步配置步骤

https://webpack.docschina.org/configuration/
快速生成:npx webpack-cli init

  1. 新建项目文件夹mkdir webpack-demo;cd webpack-demo,然后npm init -y
  2. npm install webpack webpack-cli --save-dev 安装webpack和webpack-cli并保存到package.json,使用开发环境
  3. 新建目录结构index.html, src/ index.js;在package.json中删除"main": “index.js”,添加"main": “index.js”。以便确保我们安装包是 private(私有的),并且移除 main 入口。这可以防止意外发布你的代码
  4. 调整目录结构,将index.html——>dist/index.html; 然后npm install --save lodash安装lodash(安装lodash是因为 js脚本的执行依赖于外部库。 如果依赖不存在,或者引入顺序错误,应用程序将无法正常运行。如果依赖被引入但是并没有使用,浏览器将被迫下载无用代码)
  5. 修改dist/index.html为如下,执行 npx webpack(Node 8.2/npm 5.2.0 以上版本提供的 npx 命令,用于还未设置npm,可以运行在初次安装的 webpack package 中的 webpack 二进制文件(即./node_modules/.bin/webpack))。此时,在浏览器中打开 dist 目录下的 index.html,如果一切正常,你应该能看到以下文本:‘Hello webpack’
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>起步</title>
<!--    <script src="https://unpkg.com/lodash@4.17.20"></script>-->
</head>
<body>
<!--<script src="../src/index.js"></script>-->
    <script src="main.js"></script>
</body>
</html>

  1. 创建webpack.config.js(在 webpack v4 中,可以无须任何配置,然而大多数项目会需要很复杂的设置,这就是为什么 webpack 仍然要支持 配置文件。这比在 terminal(终端) 中手动输入大量命令要高效的多)。然后在package.json的“script”中添加"build": “webpack”,此时可以npm run build来运行项目
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

网上的webpack构建步骤:
https://blog.csdn.net/qq_39239110/article/details/90408644

  1. 新建一个demo文件夹,$npm init -y 命令创建一个package.json文件
  2. demo文件夹下创建src/main.js和index.html,然后打包,使用命令webpack ./src/main.js -o ./dist/bundle.js
  3. 安装webpack和webpack-cli: npm i webpack -D; npm i wepback-cli -D
  4. 安装webpack-dev-server(自动打包工具)使用命令:npm i webpack-dev-server -D --save;并且到package.json文件下进行配置:script:{“dev”:“webpack-dev-serve --open --port 8000 --contenBase src --hot”}
  5. 在根目录下创建webpack.config.js(下面详细介绍)
  6. 运行项目 npm run dev(基本差不多,只在package.json文件有些区别)

配置加载css

  1. 首先安装依赖npm install --save-dev style-loader css-loader
  2. 在webpack配置文件中添加loader
// 模块 loader 可以链式调用。链中的每个 loader 都将对资源进行转换。链会逆序执行。
// - 第一个 loader 将其结果(被转换后的资源)传递给下一个 loader,依此类推。最后,webpack 期望链中的最后的 loader 返回 JavaScript。
// - 必须保证 loader 的先后顺序:'style-loader' 在前,而 'css-loader' 在后。
	module: {
        rules: [
            {
            // 所有以 .css 结尾的文件,都将被提供给 style-loader 和 css-loader
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
            // 类似的,加载image图像,因为有内置 Asset Modules ,所以不需要安装库文件
		        test: /\.(png|svg|jpg|jpeg|gif)$/i,
		        type: 'asset/resource',
		     },
		     {
		     // 当然,字体文件Asset Modules也能处理
		        test: /\.(woff|woff2|eot|ttf|otf)$/i,
		        type: 'asset/resource',
		     },
		     //还有加载数据,CSV、TSV 和 XML,详见官网
        ],
    },
  • 写style.css文件,并在src/index.js中import。此时npm run build运行,样式即生效
    注意:在使用webpack工具时,其只会对JS和JSON文件生效,必须配置loader来实现配置css文件

管理输出

该部分优化dist/ index.html的js模块的手动引入
(详见官网,先创建print.js,再设置index.html,最后设置webpack.config,js的entry)
可以在output中加clean: true来自动清理dist中的旧文件

  • 安装HtmlWebpackPlugin,npm install --save-dev html-webpack-plugin

该插件可以管理index.html,如title等,安装完需要设置webpack.config.js

	plugins: [
        new HtmlWebpackPlugin({
            title: '管理输出',
        }),
    ],

持续更新

打算手动配一遍webpack,内容还有很多(修改自动编译等),具体如下:
在这里插入图片描述

vue.config.js

用vue框架,当有一些自定义需求时,可以创建一个vue.config.js

let path = require('path')
module.exports = {
	publicPath:	process.env.NODE_ENV === 'production'?'/vue-project':'/'	//上线后的路径
	outputDIr:			//输出目录,叫什么名
	assetDir:'static'		//静态文件夹放到哪个目录下
	runtimeCompiler:true	//是否使用运行时,使用template模板
	parallel:require('os').cpus().length>1				//打包是否使用多线程打包,多余1核cpu,启动并行压缩
	productionSourceMap:false		//是否使用sourceMap,生产环境不使用
	
	//有关webpack配置
	ChainWebpack:config=>{		//改变原有webpack配置
		config.resolve.alias.set('component',path.resolve(_dirname,'src/components'))
	},
	configureWebpack:{			//在config里新增一些插件
		plugins:[]
	},

	//配本地服务
	devServe:{			//配代理
		proxy:{			//放路径
			'/api':{
				target:'http://lalala:3000',
				changeOrigin:true
			}
		}
	},
	
	//放vue的第三方插件
	pluginOptions:{
		'style-resources-loader':{
			preProcessor:'less',
			patterns:[
				//插入全局样式
				path.resolve(_dirname,'src/assets/common.less')
			]
		}
	}
}
Logo

前往低代码交流专区

更多推荐