Vue篇——webpack配置及css文件打包

最新推荐文章于 2024-04-13 10:48:12 发布

J-April

最新推荐文章于 2024-04-13 10:48:12 发布

阅读量1k

点赞数

分类专栏：前端开发文章标签： vue

本文链接：https://blog.csdn.net/weixin_47016497/article/details/114285330

版权

前端开发专栏收录该内容

12 篇文章 3 订阅

订阅专栏

通过webpack将js及css文件打包

程序结构

在这里插入图片描述

1、各部分模块

//info.js
//导出模块
export const name ='小红';
export const age ='18';

// mainUtils.js
function add(num1, num2) {
	return num1 + num2
}

function mul(num1, num2) {
	return num1 * num2
}
//模块导出
module.exports = {
	add,
	mul
}

/* normal.css */
body{
	background: red;
}

2、模块入口

// main.js
// 加载mainUtils模块
const{add,mul}=require('./mainUtils.js')
console.log(add(20,30))
console.log(mul(20,30))
//加载info模块
import {name,age} from "./info.js"
console.log(name)
console.log(age)
//加载css模块
require('./normal.css')

3、在终端通过命令生成package.json

npm init

{
	"name": "vue-webpack",
	"version": "1.0.0",
	"description": "",
	"main": "webpack.config.js",
	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1",
		"build": "webpack"
	},
	"author": "",
	"license": "ISC",
	"dependencies": {
		"webpack": "^3.6.0"
	},
	"devDependencies": {
		"css-loader": "^3.3.0"
	}
}

4、安装webpack

npm install webpack -g // 全局安装
npm install webpack --save-dev // 项目内安装

5、配置webpack-config.js

const path = require('path')
module.exports = {
	//入口
	entry: './src/main.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js'
	},
	//css文件打包的module
	module: {
	    rules: [
	      {
	        test: /\.css$/,
	        use: ['style-loader','css-loader' ]
	      }
	    ]
	  }
}

配置webpack文件之前，还需安装其他的loader用于打包样式等静态资源（例子以打包css文件为例）
style-loader //将模块的导出作为样式添加到 DOM 中
css-loader //解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码

// webpack.config.js
const path = require('path')
module.exports = {
	//入口
	entry: './src/main.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js'
	},
	//css文件打包的module
	module: {
	    rules: [
	      {
	        test: /\.css$/,
	        use: ['style-loader','css-loader' ]
	      }
	    ]
	  }
}

<!DOCTYPE html>
<html>
	<!-- index.html -->
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script src="./dist/bundle.js"></script>
</html>

6、使用Webpack打包

在这里插入图片描述

执行之后在dist文件下会生成bundle.js

注意

程序执行过程出现的问题：
①问题一
在这里插入图片描述
——解决方案：未加载相关loader

②问题二

当按照上述步骤仍出现css或JavaScript文件无法打包
——解决方案：可手动降低css-loader以及webpack版本，再通过终端命令npm install 重新安装即可
在这里插入图片描述

结尾

通过这篇文章大家可以初步的了解webpack的打包流程，以及webpack的一些工具和插件，并且可以简单打包。

J-April

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue篇——webpack配置及css文件打包

通过webpack将js及css文件打包程序结构1、各部分模块//info.js//导出模块export const name ='小红';export const age ='18';// mainUtils.jsfunction add(num1, num2) { return num1 + num2}function mul(num1, num2) { return num1 * num2}//模块导出module.exports = { add, mul}
复制链接

扫一扫