vue.js学习笔记二十 二——webpack-plugin与loader-配置
1. 使用`html-webpack-plugin`插件配置启动页面
由于使用`--contentBase`指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性，所以推荐使用`html-webpack-plugin`插件配置启动页面.
1.1 运行`cnpm i html-webpack-plugin --save-dev`安装到开发依赖 或者 `cnpm i html-webpack-plugin -D`
该插件的作用是在内存中生成index.html文件
1.2 修改`webpack.config.js`
1.2.1 导入html-webpack-plugin
1.2.2 在plugins中引入`cnpm i html-webpack-plugin --save-dev`
// 导入处理路径的模块
var path = require('path');
// 导入自动生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
output: { // 配置输出选项
path: path.resolve(__dirname, 'dist'), // 配置输出的路径
filename: 'bundle.js' // 配置输出的文件名
},
plugins:[ // 添加plugins节点配置插件
new htmlWebpackPlugin({
template:path.resolve(__dirname, 'src/index.html'),//模板路径
filename:'index.html'//自动生成的HTML文件的名称
})
]
}注意：
1. 只要是插件都需要放到plugins中
2. htmlWebpackPlugin插件的构造函数传递的参数是一个对象，有两个参数：
2.1 参数一：指定模板页面,插件会根据该文件生成内存中的页面
2.2 参数二：指定生成的页面的名称
1.3 修改`package.json`中`script`节点中的dev指令如下
"dev": "webpack-dev-server"1.4 将index.html中script标签注释掉，因为`html-webpack-plugin`插件会自动把bundle.js注入到index.html页面中
2. `html-webpack-plugin`插件的两个作用
2.1 自动在内存中根据指定页面生成一个内存的页面
2.2 自动把打包好的boundle.js追加到页面中
3. 使用html-webpack-plugin的完整案例
目录结构：
|-- dist
|-- node_modules
|-- src
|-- css
|-- images
|-- js
|-- index.html
|-- main.js
|-- package-lock.json
|-- package.json
|-- webpack.config.js
注意：css、images、js目录是空的。
3.1 index.html
Document
- 这个是第1个li标签
- 这个是第2个li标签
- 这个是第3个li标签
- 这个是第4个li标签
- 这个是第5个li标签
- 这个是第6个li标签
- 这个是第7个li标签
- 这个是第8个li标签
- 这个是第9个li标签
- 这个是第10个li标签
注意：这里不需要引入js文件，因为html-webpack-plugin会自动引入到内存页面中
3.2 main.js
// 这个是main.js 是我们项目的JS入口文件
// 1. 导入jQuery
// import *** from *** 是ES6中导入模块的方式
// 在node.js中导入模块用 const $ = require('jquery');
// 由于现在很多浏览器解析不了ES6 的语法，所以这一行执行的时候会报错
import $ from 'jquery' // 表示从node_modules中导入jQuery包，用$这个变量名来接收
$(function(){
$('li:odd').css('backgroundColor','yellow');
$('li:even').css('backgroundColor',function(){
return '#' + 'D97643';
});
});
3.3 package.json
{
"name": "webpackstudy",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"jquery": "^3.4.1"
},
"devDependencies": {
"html-webpack-plugin": "^3.2.0",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev1": "webpack-dev-server --open --port 6666 --contentBase src --hot",
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC"
}
注意：在script标签中配置"dev":"webpack-dev-server"，这样，就可以直接使用npm run dev来启动了
3.4 webpack.config.js
const path = require('path');
const webpack = require('webpack');
// 导入 在内存中生成的HTML页面的插件
// 注意：只要是插件都需要放到plugins中
const htmlwebpackPlugin = require('html-webpack-plugin');
// 这个配置文件，其实就是一个js文件，通过node中的模块操作，向外暴露一个配置对象
module.exports = {
entry:path.join(__dirname,'./src/main.js'), // 入口,表示要使用webpack打包的那个文件；__dirname 表示当前根目录
output:{ // 输出文件相关的属性
path:path.join(__dirname,'./dist'), // 指定 打包好的文件，输出到哪个目录中去
filename:'boundle.js' // 指定输出的文件的名称
},
devServer:{ // 这里是配置dev-server命令参数的
// --open --port 6666 --contentBase src --hot
open:true, // 自动打开浏览器
port:7777, // 指定端口号
contentBase:'src', // 指定托管的根目录
hot:true // 启用热更新
},
plugins:[ // 配置插件的节点
new webpack.HotModuleReplacementPlugin(), // new 一个热更新的模块对象，
new htmlwebpackPlugin({ // 创建一个在内存中生成HTML页面的插件
template:path.join(__dirname,'./src/index.html'), //指定模板页面,插件会根据该文件生成内存中的页面
filename:'index.html' // 指定生成的页面的名称
})
]
}
注意：html-webpack-plugin插件需要先引入，再在plugins中配置
4. 引入css文件
我们现在在css目录中加入index.css文件
li {
list-style:none;
}在main.js文件中引入css文件
import './css/index.css';保存，发现报错
Module parse failed: Unexpected token (1:3)
You may need an appropriate loader to handle this file type.
为什么jQuery可以用import引入，而css文件不可以了，这是因为webpack默认情况下只能打包处理js类型的文件，无法处理其他非js类型的文件，当我们保存的时候，webpack自动打包，发现该文件不是js文件，所以报错了。
那么，我们要怎么处理这些非js文件了，这时候，我们就需要手动安装一些合适的第三方loader加载器
5. 使用webpack打包css文件
5.1 安装loader加载器
运行`cnpm i style-loader css-loader --save-dev` 或者 `cnpm i style-loader css-loader -D`
5.2 修改`webpack.config.js`配置文件，新增配置节点module，它是一个对象
module: { // 用来配置第三方loader模块的
rules: [ // 文件的匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
]
}注意：
1. module：用来配置第三方loader模块的节点
2. rules：是个数组，数组中存放了所有第三方文件的匹配和处理规则，每一个规则用一个对象表示
3. test：匹配规则的正则表达式
4. use：表示使用哪些模块来处理`test`所匹配到的文件
注意：`use`中相关loader模块的调用顺序是从后向前调用的；
配置好之后，在main.js中就可以跟jQuery一样通过import引入css文件了。
6. webpack调用第三方loader的过程
1. 首先，webpack发现，我们并没有通过命令的形式，给它指定入口和出口
2. webpack就会去项目的根目录中，查找一个叫做webpack.config.js的配置文件
3. 当找到配置文件后，webpack会去解析执行这个配置文件，当解析执行完配置文件之后，就得到了配置文件中导出的配置对象
4. 当webpack拿到配置对象后，就拿到了配置对象中指定的入口和出口，然后进行打包构建。
7. webpack打包less文件
less文件也是一种样式文件，和css文件打包方式差不多
7.1 新建index.less文件
u {
margin: 0px;
padding: 0px;
}7.2 安装less-loader
运行`cnpm i less-loader less -D`
7.3 配置匹配规则
{test:/\.less/,use:['style-loader','css-loader','less-loader']}
7.4 main.js引入less文件
import './css/index.less';
8. webpack打包scss文件
1. 运行`cnpm i sass-loader node-sass --save-dev`
2. 在`webpack.config.js`中添加处理sass文件匹配规则：
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
3. 在main.js文件引入scss文件