vue.js学习笔记二十二——webpack-plugin与loader-配置

最新推荐文章于 2023-11-01 08:45:55 发布

武汉小喽啰

最新推荐文章于 2023-11-01 08:45:55 发布

阅读量372

点赞数

分类专栏： # vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43318134/article/details/96039057

版权

vue 专栏收录该内容

46 篇文章 8 订阅

订阅专栏

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

	<!-- 注意：不推荐直接在这里引用任何包和任何css文件
				而是尽量在man.js中完成，将来直接引用一个main就可以了。
	-->
	<!--<script src="main.js"></script>-->
	<!-- <script src="/boundle.js"></script> -->
</head>
	<body>
		<ul>
			<li>这个是第1个li标签</li>
			<li>这个是第2个li标签</li>
			<li>这个是第3个li标签</li>
			<li>这个是第4个li标签</li>
			<li>这个是第5个li标签</li>
			<li>这个是第6个li标签</li>
			<li>这个是第7个li标签</li>
			<li>这个是第8个li标签</li>
			<li>这个是第9个li标签</li>
			<li>这个是第10个li标签</li>
		</ul>
	</body>
</html>

注意：这里不需要引入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文件

武汉小喽啰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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`安装到开发依赖 ...
复制链接

扫一扫