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')
			]
		}
	}
}
# webpack
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue