webpack打包项目（vue）三

六、webpack中的加载器

通过loader打包js模块
在实际过程中，webpack默认只打包处理以 .js 后缀名结尾的模块，其他非 .js 后缀名的webpack默认处理不了，需要调用loader加载器才可以正常处理打包，否则会报错。

1、打包处理CSS文件

1）运行npm i style-loader css-loader -D命令

2）在webpack.config.js的module -> rules数组中，添加loader规则如下：

// An highlighted block
module: {
	rules: [
		{test: /\.css$/, use: ['style-loader', 'css-loader']} // 顺序固定，从后往前调
	]
}

其中test表示匹配的文件类型，use表示对应要调用的loader

2、打包处理less\sass文件

1）运行npm i less-loader less -D命令

2）运行npm i sass-loader node-sass -D命令

3）

module: {
	rules: [
		{test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
		{test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']}
	]
}

3、配置postcss自动添加css的兼容前缀

1）运行npm i postcss-loader autoprefixer -D

2) 在项目根目录的postcss的配置文件postcss.config.js

module.exports = {
	plugin: [autoprefixer] // 挂在插件
}

3）在webpack.config.js的module -> rules数组中，修改css的loader规则如下：

module: {
	{test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader']},
}

4、打包处理样式表中的图片和字体文件

1）运行npm i url-loader file-loader -D

2) 在webpack.config.js的module -> rules数组中

module: {
	{test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, 
	use: 'url-loader?limit=16940'}, // 传参 图片大小 单位字节， 只有小于，才会被转为base64图片
}

5、打包处理js文件中的高级语法

1）安装babel转换器相关的包

npm i babel-loader @babel/core @babel/runtime -D

2）安装babel语法插件相关的包

npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

3）创建babel配置文件babel.config.js并初始化基本配置

module.export = {
	presets: ['@babel/preset-env'],
	plugin: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
}

4）在webpack.config.js的module -> rules 数组中

module: {
	{test: /\.js$/, 
	use: 'babel-loader', exclude: '/node_modules'}, // exclude排除，不需要处理这种文件
}

6、webpack中配置vue组件的加载器

1）运行npm i vue-loader vue-template-compiler -D

2）在webpack.config.js配置文件中

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.export = {
	rules: [
		{test: /\.vue$/, loader: 'vue-loader'}
	],
	plugin: [
		new VueLoaderPlugin ()
	]
}

7、在webpack项目中使用vue

1）运行npm i vue -s

2）在src -> index.js 入口，==import Vue form ‘vue’==导入到Vue构造函数

3）创建Vue的实例对象，并指定要控制的el区域

4）通过render 函数渲染App跟组件

// 导入Vue构造函数
import App form './components/App.vue'
const vm = new Vue({
	el: '#app',
	render: h => h(App) // 通过render函数，吧指定的组件渲染到el区域中
})

8、webpack打包发布

1）在package.json 文件中配置webpack打包命令

2）该命令默认加载项目根目录中的webpack.config.js配置文件

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

-> npm run build 生成dist文件

~END