使用Webpack打包、配置和加载 VUE组件

其他 2020-04-10 19:11:17 阅读次数: 0

webpack4 确保使用Node版本 >= 8.9.4

Webpck是一个前端资源加载/打包工具。它根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
官网: https://webpack.js.org/

使用webpack4不再强制需要webpack.congig.js作为打包入口配置文件。
默认入口为’./src’的index和默认出口’./dist’，小型项目可以应用，大型项目不推荐。

ps:在安装包的时候 我使用的是cnpm不是npm是因为有淘宝镜像，如果看到这篇文章的同学没有安装 把c去掉就可以。

1-10是webpack的基本配置使用 。11-12是vue组件的配置和打包

  1. 创建项目 –
  2. 安装配置webpack –
  3. 修改打包的入口和出口 –
  4. 配置自动打包的功能 –
  5. 配置html-webpack-plugin生成预览的页面 –
  6. 配置自动打包的相关参数 –
  7. webpack的加载器(loader)基本使用 –
  8. 配置postCSS自动添加css的兼容前缀 –
  9. 打包样式表中的图片和字体文件 –
  10. (babel)打包处理js文件中的高级语法 –
  11. 配置vue组件加载器 –
  12. webpack 打包 –

> 一. webpack的基本使用

  1. 创建项目空白目录，并运行 npm init -y 命令，初始化包管理配置文件 package.json
  2. 新建 src 源代码目录
  3. 新建 src -> index.html 首页
  4. 初始化首页基本的结构
  5. 运行 npm install jquery -s 命令 安装jquery
  6. 通过模块化的形式，实现列表隔行变色功能
    index.html内容
    上图是index.html的内容
    在这里插入图片描述
    上图是index.js的内容。
    运行index.html是会报错的。这时候就需要webpack来解决兼容的问题。
    开始第二步 …

> 二. 在项目中安装和配置webpack

  1. 运行 cnpm i webpack webpack-cli -D 命令
  2. 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件
  3. 在 webpack 配置文件中，初始化如下基本配置
   module.exports={
   	mode:'development' // mode用来指定构建模式 开发阶段可用 development 模式
   	// development转换出来的代码不会被压缩 转换速度较快，production 模式与之相反
   	// production用于上线阶段
   }

在这里插入图片描述

  1. 在 package.json 配置文件的 scripts 节点下，新增 dev 脚本如下
"scripts":{
   	"dev":"webpack" // script 节点下的脚步 可以通过 npm run执行
   }

在这里插入图片描述

  1. 在终端中运行 npm run dev 命令 启动 webpack 进行项目打包。
    在这里插入图片描述
    此时在浏览器中运行 index.html 就不会出错。

> 三. 配置打包的入口和出口

webapck 4.x 版本默认约定:
打包入口文件为 src – index.jx
打包输出文件为 dist – main.js

如果想要修改入口和出口，在webpack.config.js中新增如下配置

const path = require('path') // 导入node中专门操作路径的模块
module.exports = {
	entry:path.join(__dirname, './scr/index.js'), //打包入口文件路径
	output:{
		path:path.join(__dirname, './dist'), // 输出文件的存放路径
		filename:'bundle.js' //输出文件的名称
	}
}

配置完如下:
在这里插入图片描述
然后重新运行 npm run dev 进行打包
在dist的目录下 会多出一个bundle.js ，修改index.html的js引入文件，重新运行，同样有效。
在这里插入图片描述

> 四. 配置自动打包的功能

自动打包是为了避免每次修改都要重新打包这种繁琐的步骤

  1. 运行 cnpm install webpack-dev-server -D 命令 安装支持项目自动打包的工具
  2. 修改 package.json -> scripts 中的 dev 命令
"scripts":{
	"dev":"webpack-dev-server" 
}
  1. 将 src-> index.html中的script脚本引用路径修改为 “bundle.js”
    这里可以理解为在项目的根目录中有个隐藏的 bundle.js
  2. 运行 npm run dev 重新进行打包
  3. 在浏览器访问 http://localhost:8080 地址 ，查看自动打包效果
    在这里插入图片描述

此时在页面中修改代码 保存 就会自动编译 不用刷新页面就能看到效果

webpack-dev-server 会启动一个实时打包的 http 服务器
webpack-dev-server 打包生成的输出文件(这里是bundle.js)，默认放到了项目根目录中 而且是虚拟的 看不见的

> 五. 配置html-webpack-plugin生成预览的页面

打开 http://localhost:8080 看到的是项目 目录
这里如果想直接看到主页 就需要通过 html-webpack-plugin 配置

  1. 运行 cnpm install html-webpack-plugin -D 命令 安装生成预览页面的插件
  2. 修改 webpack.config.js 文件头部区域 添加如下配置
// 导入生产预览页面的插件 得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({ // 创建插件的实例对象
	template:'./src/index/html', // 指定要用到的模版文件
	filename:'index.html' // 指定生产文件的名称 该名称存在于内存中 目录中不显示
})
  1. 修改 webpack.congig.js 文件中向外暴露的配置对象 新增如下配置
module.exports = {
	plugins = [htmlPlugin] // plugins数组是webpack打包期间会用到的一些插件列表
}

在这里插入图片描述

然后 npm run dev 刷新 http://localhost:8080 就能直接看到主页面

> 六. 配置自动打包的相关参数

在打包完成的时候 需要手动在浏览器中输入地址 才能看到页面
如果想自动打开浏览器进入主页 可以参考如下配置

// package.json 中的配置
// --open 打包完成自动打开浏览器页面
// --host 配置IP地址
// --port 配置端口
"scripts":{
	"dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888"
}

然后运行 npm run dev 就会自动打开主页面 并且地址和端口号就是你配置的值

> 七. webpack的加载器(loader)基本使用

webpack默认只能打包处理以.js后缀名结尾的模块，其他非js结尾的文件需要调用loader加载器才可以正常打包,否则就会报错。
loader加载器可以协助webpack打包处理特定的文件模块 比如:

  1. less-loader 打包处理 .less 相关文件
  2. sass-loader 打包处理 .scss 相关的文件
  3. url-loader 打包处理 css 中宇url路径相关的文件

这里结合实际项目 不需要全部都配置。

【一 css loader配置】

  1. 运行 cnpm i style-loader css-loader -D 命令
  2. 在 webpack.config.js 的module->rules 数组中 添加loader规则如下:
// 所有第三方文件模块的批判规则
module:{
	rules:[
		{test:/\.css$/,use:['style-loader','css-loader']}
	]
}

【二 less loader配置】

  1. 运行 cnpm i less-loader less -D
  2. 在 webpack.config.js 的module->rules 数组中 添加loader规则如下:
// 所有第三方文件模块的批判规则
module:{
	rules:[
		{test:/\.less$/,use:['style-loader','css-loader', 'less-loader']}
	]
}

【三 scss loader配置】

  1. 运行 cnpm i sass-loader node-sass -D
  2. 在 webpack.config.js 的module->rules 数组中 添加loader规则如下:
// 所有第三方文件模块的批判规则
module:{
	rules:[
		{test:/\.scss$/,use:['style-loader','css-loader', 'sass-loader']}
	]
}

在这里插入图片描述
测试是否配置成功
我在src目录下新建了css文件夹
在css文件中新建了三个文件 base.css ,base1.less, base2.scss
并在每个样式文件里写了样式，然后在index.js文件导入这三个文件
npm run dev 打包运行 没有报错 并且样式全部生效
在这里插入图片描述

> 八. 配置postCSS自动添加css的兼容前缀

主要是处理浏览器的兼容.

  1. 运行 cnpm i postcss-loader autoprefixer -D 命令
  2. 在项目根目录中创建postcss的配置文件 postcss.config.js 并初始化配置
const autoprefixer = require('autoprefixer') // 导入自动添加前缀的文件
module.exports = {
	plugins:[autoprefixer] // 挂载创建
}

在这里插入图片描述

  1. 在webpack.config.js的module->rules 数组中，添加 loader规则如下
module:{
	rules:[
		{test:/\.scss$/,use:['style-loader','css-loader', 'postcss-loader']}
	]
}

> 九. 打包样式表中的图片和字体文件

在项目中有图片和字体资源的时候需要处理一些配置。
这里可以在src目录新建images文件夹然后引入里面的图片进行测试。

  1. 运行 cnpm i url-loader file-loader -D 命令
  2. 在 webpack.config.js 的module->rules 数组中，添加loader规则
module:{
	rules:[
		{
			test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
			use: 'url-loader?limit=70000'
		}
	]
}
// ?之后的事loader的参数项
// limit用来指定图片的大小 单位是字节byte 只有小于limit大小的图片 才会被转为base64
// base64的图片加载比较快

在这里插入图片描述

> 十. (babel)打包处理js文件中的高级语法

  1. 安装babel转换器相关的包 cnpm i babel-loader @babel/core @babel/runtime -D
  2. 安装babel语法插件相关的包 cnpm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
  3. 在项目根目录下 创建babel配置文件 babel.config.js 并初始化基本配置
module.exports = {
	presets:['@babel/preset-env'],
	plugins:['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
}
  1. 在webpack.config.js 的 module->rules 数组中 添加loader规则如下
// exclude 为排除项 表示babel-loader不需要处理mode-modules中的js文件

{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}

在进行以上配置的时候，我在index.js里面写了一个方法 运行的时候报错了。
配置好之后再运行，就可以输出结果了。
在这里插入图片描述

> 十一. webpack 配置 VUE loader

首先在src下新建了一个 components的文件夹 然后在里面新建了 App.vue
然后在index.js 引入App.vue 出现报错
这里通过webpack来进行loader配置

  1. 运行 cnpm i vue-loader vue-template-compiler -D
  2. 在webpack.config.js配置文件中 添加vue-loader的配置
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
	module:{
		rules:[
		   // 其他规则
		   {test:/\.vue$/, use:'vue-loader'}
		]
	},
	plugins:[
		// 其他插件
		new VueLoaderPlugin() //确保引入这个插件
	]
}

> 十二. webpack 打包

在package.json 文件中配置webpack打包命令
该命令默认加载项目根目录的 webpack.config.js 配置文件

"scripts":{
	// 用于打包的命令
	"build": "webpack -p",
}

npm run build 会生成一个dist文件 可以把这个文件发配到服务器或外网公布等等操作

Twelve--
发布了41 篇原创文章 · 获赞 2 · 访问量 1836
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_43883485/article/details/104693902
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022