win7 在Webpack5上搭建Vue3

JanInz
168 阅读4分钟
概念

npm(node package manager)为你和你的团队打开了连接整个JavaScript天才世界的一扇大门。它是世界上最大的软件注册表，每星期大约有30亿次的下载量，包含超过600000个包(即代码模块）。来自各大洲的开源软件开发者使用npm互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。(相当于composer)

首先要安装好nodejs
1.创建文件夹后 初始化npm

npm init -y

image.png

2.安装yarn （Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ，正如官方文档中写的，Yarn 是为了弥补 npm 的一些缺陷而出现的）

如果提示错误 yarn 不是内部或外部命令，也不是可运行的程序 或批处理文件。

1. 卸载    npm uninstall yarn -g

2. 安装    npm install yarn   （最好不要用别的安装命令，会没效果）

3. 添加环境变量：系统变量path添加 C:\Users\bokeyuan\node_modules\yarn\bin

4. 重新打开cmd执行：yarn -v 查看版本号

3.安装webpack

执行npm install --save-dev webpack webpack-cli安装 Webpack --save-dev 表示安装的模块属于开发依赖，会被自动记录在 package.json 中 devDependencies 位置，仅在开发与打包时才会使用到这些模块

4.创建文件跟文件夹-- 看图

project-name 创建/public/index.html

image.png

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
	<title><%=htmlWebpackPlugin.options.title%></title>
</head>
<body>
	<noscript>需要运行在vue环境中</noscript>
	<div id="app"></div>

</body>
</html>
5.使用 html-webpack-plugin 来生成 HTML 文件

yarn add html-webpack-plugin -D

webpack.config.js 上配置plugin后 package.json添加生成静态资源方法

image.png

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')


const pathResolve = _path => path.resolve(__dirname, _path) //重定向

module.exports = {
	mode: 'development',
	entry: './src/index.js',
	output: {
	  	path: path.resolve(__dirname, 'dist'),
	    filename: '[name].bundle.js',
	},
	plugins:[
		new HtmlWebpackPlugin({
		template:pathResolve('./public/index.html'),
		title:'vue single-spa'
	}),
	],
  }
6.处理CSS、less文件

yarn add style-loader css-loader

yarn add less less-loader -D

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')


const pathResolve = _path => path.resolve(__dirname, _path) //重定向

module.exports = {
	mode: 'development',
	entry: './src/index.js',
	output: {
	  	path: path.resolve(__dirname, 'dist'),
	    filename: '[name].bundle.js',
	},
	//处理CSS less文件
	module: {
	    rules: [
	      {
	        test: /\.css$/i,
	        use: ["style-loader", "css-loader"],
	      },
	      {
	        test: /\.less$/i,
	        use: [
	        	//
	          "style-loader",
	          'css-loader',
	          'less-loader',
	          'postcss-loader'
	        ],
	      },
	    ],
	},
	//使用 html-webpack-plugin 来生成 HTML 文件
	plugins:[
		new HtmlWebpackPlugin({
		template:pathResolve('./public/index.html'),
		title:'vue single-spa'
	}),
	],
  }
7.提取样式文件

上面引入 css 的方式最终打包之后 CSS 代码都在 js 里面，为了网站的性能需要将 CSS 单独提取出来，使用 mini-css-extract-plugin 插件来提取 CSS

yarn add mini-css-extract-plugin -D

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const pathResolve = _path => path.resolve(__dirname, _path) //重定向

module.exports = {
	mode: 'development',
	entry: './src/index.js',
	output: {
	  	path: path.resolve(__dirname, 'dist'),
	    filename: '[name].bundle.js',
	},
	//处理CSS less文件
	module: {
	    rules: [
	      {
	        test: /\.css$/i,
	        use: [MiniCssExtractPlugin.loader, "css-loader"],
	      },
	      {
	        test: /\.less$/i,
	        use: [
	        	//提取css样式文件
	          MiniCssExtractPlugin.loader,
	          'css-loader',
	          'less-loader',
	          'postcss-loader'
	        ],
	      },
	    ],
	},
	//使用 html-webpack-plugin 来生成 HTML 文件
	plugins:[
		new HtmlWebpackPlugin({
		template:pathResolve('./public/index.html'),
		title:'vue single-spa'
	}),
		new MiniCssExtractPlugin({
			filename: '[name].[hash:8].css'
		})
	],
  }
8.webpack的常用扩展 clean-webpack-plugin

默认webpack打包后的dist文件夹下的js文件并不会被自动删除，如果重新打包，会生成新的文件，旧的文件仍然会存在。 使用此插件webpack打包后的dist目录中的所有文件将被删除一次。

yarn add clean-webpack-plugin -D

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const {CleanWebpackPlugin} = require('clean-webpack-plugin')


const pathResolve = _path => path.resolve(__dirname, _path) //重定向

module.exports = {
	mode: 'development',
	entry: './src/index.js',
	output: {
	  	path: path.resolve(__dirname, 'dist'),
	    filename: '[name].bundle.js',
	},
	//处理CSS less文件
	module: {
	    rules: [
	      {
	        test: /\.css$/i,
	        use: [MiniCssExtractPlugin.loader, "css-loader"],
	      },
	      {
	        test: /\.less$/i,
	        use: [
	        	//提取css样式文件
	           MiniCssExtractPlugin.loader,
	          'css-loader',
	          'less-loader',
	          'postcss-loader'
	        ],
	      },
	    ],
	},
	//使用 html-webpack-plugin 来生成 HTML 文件
	plugins:[
		new HtmlWebpackPlugin({
		template:pathResolve('./public/index.html'),
		title:'vue single-spa'
	}),
		new MiniCssExtractPlugin({
			filename: '[name].[hash:8].css'
		}),
		new CleanWebpackPlugin()
	],
  }
9.引入postcss-loader

yarn add postcss-loader autoprefixer -D

postcss-loader应该是 Webpack 配置中不可或缺的一个 CSS loader。它负责进一步处理 CSS 文件，比如添加浏览器前缀，压缩 CSS 等，在本案例中用于处理less文件 image.png image.png 在src下新建index.less文件 执行yarn build 看是否生成对应css文件 image.png image.png webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const {CleanWebpackPlugin} = require('clean-webpack-plugin')


const pathResolve = _path => path.resolve(__dirname, _path) //重定向

module.exports = {
	mode: 'development',
	entry: './src/index.js',
	output: {
	  	path: path.resolve(__dirname, 'dist'),
	    filename: '[name].bundle.js',
	},
	//处理CSS less文件
	module: {
	    rules: [
	      {
	        test: /\.css$/i,
	        use: [MiniCssExtractPlugin.loader, "css-loader"],
	      },
	      {
	        test: /\.less$/i,
	        use: [
	        	//提取css样式文件
	           MiniCssExtractPlugin.loader,
	          'css-loader',
	          'less-loader',
	          //添加postcss配置 处理less
	          'postcss-loader'
	        ],
	      },
	    ],
	},
	//使用 html-webpack-plugin 来生成 HTML 文件
	plugins:[
		new HtmlWebpackPlugin({
		template:pathResolve('./public/index.html'),
		title:'vue single-spa'
	}),
		new MiniCssExtractPlugin({
			filename: '[name].[hash:8].css'
		}),
		new CleanWebpackPlugin()
	],
  }
10.启动本地服务

npm install --save-dev webpack webpack-dev-server

添加对应配置 image.png

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const {CleanWebpackPlugin} = require('clean-webpack-plugin')


const pathResolve = _path => path.resolve(__dirname, _path) //重定向

module.exports = {
	mode: 'development',
	entry: './src/index.js',
	//添加本地服务
	devtool:'inline-source-map',
	devServer: {
	    compress: true,
	    port: 8080
  	},
	output: {
	  	path: path.resolve(__dirname, 'dist'),
	    filename: '[name].bundle.js',
	},
	//处理CSS less文件
	module: {
	    rules: [
	      {
	        test: /\.css$/i,
	        use: [MiniCssExtractPlugin.loader, "css-loader"],
	      },
	      {
	        test: /\.less$/i,
	        use: [
	        	//提取css样式文件
	           MiniCssExtractPlugin.loader,
	          'css-loader',
	          'less-loader',
	          //添加postcss配置 处理less
	          'postcss-loader'
	        ],
	      },
	    ],
	},
	//使用 html-webpack-plugin 来生成 HTML 文件
	plugins:[
		new HtmlWebpackPlugin({
		template:pathResolve('./public/index.html'),
		title:'vue single-spa'
	}),
		new MiniCssExtractPlugin({
			filename: '[name].[hash:8].css'
		}),
		new CleanWebpackPlugin()
	]
  }

yarn build 打包生成HTML 执行yarn dev开启本地服务 访问地址 http://localhost:8080

avatar
文章
阅读
粉丝