关于webpack的基本使用---(含配置vue组件加载器)

一、html-webpack-plugin

html-webpack-plugin 是生成预览页面，即使用npm run dev 时默认显示页面的设置，步骤如下：

1. 安装命令

npm install html-webpack-plugin -D

修改webpack.config.js 文件头部区域，添加如下配置信息：

// 导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({ // 创建插件的实例对象
    template: './src/index.html', // 指定要用到的模板文件
    filename: 'index.html' // 指定生成的文件的名称，该文件存在于内存中，在目录中不显示
})

module.exports = {
	plugins: [htmlPlugin]  //plugins 数组是 webpack 打包期间会用到的一些插件列表
}

如图所示：

二、启动时自动打开浏览器，重新配置默认ip地址和端口号

在webpack.json中进行如下更改配置

"scripts": {
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
  },
// --open 表示的是启动时直接打开系统的默认浏览器运行
// --host 表示配置ip地址
// --port 表示配置端口号

三、加载器的使用

css

命令行运行如下命令，安装处理css文件的loader

npm install style-loader css-loader -D

在webpack.config.js 中添加loader ：

module: {
	rules: [
		{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
	]
}
// test 表示匹配的文件类型， use 表示对应的要调用的 loader
//use 数组中指定的 loader 顺序
//多个loader 的调用顺序是： 从后往前调用

less

命令行运行如下命令，安装处理less文件的loader

npm install style-loader css-loader less-loader less -D

上方style-loader css-loader 已经安装过，可以不用安装。直接进行

npm install less-loader less -D

在webpack.config.js 中添加loader ：

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

scss

命令行运行如下命令，安装处理scss文件的loader

npm install style-loader css-loader sass-loader node-sass -D

上方style-loader css-loader 已经安装过，可以不用安装。直接进行

npm install sass-loader node-sass -D

在webpack.config.js 中添加loader ：

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

注： 下载的时候时间会比较长，请耐心等待。

postCSS

命令行运行如下命令，安装postCSS 自动添加 css 的兼容前缀
(postcss用于让样式兼容于各类浏览器)

npm i postcss-loader autoprefixer -D

在项目根目录中创建 postcss 的配置文件 postcss.config.js,并进行初始化：

const autoprefixer = require('autoprefixer') //导入自动添加前缀的插件
module.exports = {
	plugins: [ autoprefixer ] //挂载插件
}

在webpack.config.js 中添加loader ：

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

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

命令行运行如下命令

npm i url-loader file-loader -D

在webpack.config.js 中添加loader ：

module: {
	rules: [
 		{ 
 		test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
 		use: 'url-loader?limit=16940'
 		}
 	]
 }
// ? 之后的是 loader 的参数项
// limit 用来指定图片的大小，单位是字节(byte),只有小于 limit 大小的图片，才会被转为 base64 图片

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

安装babel 转换器相关的包：

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

安装babel 语法插件相关的包：

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

在项目根目录中建立babel配置文件babel.config.js,并进行初始化:

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

在webpack.config.js 中添加loader ：

module: {
	rules: [
 		{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
 	]
 }
 // exclude表示不打包node_module目录下的js文件，表示排除项

四、配置 vue 单文件组件的加载器

命令行执行

npm i vue-loader vue-template-compiler -D

在webpack.config.js 中添加loader ：

const VueLoaderPlugin = require('vue-loader/lib/plugin')

plugins: [new VueLoaderPlugin()],

module: {
	rules: [
 		{ test: /\.vue$/, use: 'vue-loader' }
 	]
 }