VUE学习笔记--webpack(上)

简介: VUE学习笔记--webpack

webpack的基本使用

创建列表隔行变色项目

1.新建项目空白目录,并运行 npm init -y 命令,初始化包管理配置文件package.json

2.新建src源代码项目

3.新建src -> index.hmtl 首页和src -> index.js 脚本文件

4.初始化页面基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./index.js"></script>
    <!-- <script src="../dist/main.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>
    </ul>
</body>
</html>

5.运行 npm install jquery -S 命令,安装jQuery

6.通过ES6 模块化的方式导入jQuery,实现列表隔行变色

// 使用ES6导入语法,导入jQuery
import $ from 'jquery'
// 定义jQuery的入口
$( function() {
    $('li:odd').css('background-color', 'blue');
    $('li:even').css('background-color', 'yellow');
} )

// 使用ES6导入语法,导入jQuery

import $ from ‘jquery’

会报错,样式会无法显示,需要安装webpack

在项目中安装webpack

在对应的文件夹中(存放代码的文件,刚新建的项目目录)启动终端,运行

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

安装webpack相关的两个包

-D 装完后,把信息记录到package.json的devDependencies

-S 装完后,把信息记录到package.json的dependencies

项目开发和上线都要用到的包,用-S;只在开发阶段用,用-D

-S是–save的简写;-D是–save-dev的简写

可在该网站查询

在项目中配置webpack

1.在项目的根目录中创建webpack.config,js的webpack的配置文件,并初始化如下的基本配置:

// 使用Node.js中的导出语法,向外导出一个webpack的配置对象
module.exports = {
    // 代表webpack运行的模式,可选值有两个development和production
    //development 开发时使用
    //production 上线时使用
    //development 打包时间短 文件大  开发用;   production打包时间长 文件小 项目上线用
    mode: 'development'
}

2.在webpack.json的script节点下,新增dev脚本

"scripts": {
//script节点下的脚本可以通过npm run 执行
    "dev": "webpack"
  },

3.在终端运行

npm run dev

webpack.config.js的作用

webpack.config.js是webpack的配置文件,webpack在真正开始打包构建之前,会先读取这个配置文件,从而基于给定的配置,对项目进行打包

由于webpack是基于node.js开发出来的打包工具,在它的配置文件中支持使用node.js的相关语法和模块进行webpack的个性化配置

webpack的默认约定

在webpack4.x 和 5.x 的版本中,

1.默认的打包入口为src -> index.js

2.默认的输出文件路径为 dist -> main.js

可以在webpack.config.js中修改打包的默认约定

自定义打包的入口和出口

在webpack.config.js中,通过entry节点指定打包的入口,output节点指定打包的出口

//导入node.js中操作路径模块
const path = require('path');
module.exports = {
// 代表webpack运行的模式,可选值有两个development和production
    mode: 'development'
    entry: path.join(__dirname, './src/index.js'), //打包入口文件路径
    output: {
        path: path.join(__dirname, './dist'), //输出文件的存放路径
        filename: 'main.js' //输出文件名称
    }
}

每次改代码后需要重新打包(麻烦)

webpack中的插件

可以安装和配置第三方插件,拓展webpack的能力,从而让webpack用起来更方便

常用的webpack插件:

1.webpac-dev-server:

每当修改源代码,webpack会自动进行项目的打包和构建

2.html-webpack-plugin:

可以通过此插件自定制index.html页面的内容

安装 webpac-dev-server

运行如下命令安装插件:

npm install webpac-dev-server@3.11.2 -D

配置webpac-dev-server:

1.修改package.json中的script的dev命令:

"scripts": {
    "dev": "webpack serve"
  },

2.再次运行 npm run dev

3.在浏览器中访问 http://localhost:8080/ 查看打包效果

webpack会启动一个实时打包的http服务器

如果报错了是webpack-cli的版本不兼容,重新安装webpack-cli的4.9.0版本

npm install webpack@5.42.1 webpack-cli@4.9.0 -D

由于:

i 「wds」: Project is running at http://localhost:8080/

i 「wds」: webpack output is served from /

所以需要修改html中导入的js

<script src="/main.js"></script>

在浏览器中打开 http://localhost:8080/ 打开src(浏览器会自动打开index.html)

安装 html-webpack-plugin

运行如下命令即可在项目中安装此插件:

npm install html-webpack-plugin@5.3.2 -D

在webpack.config.js文件中配置

html-webpack-plugin会把指定的页面复制到根目录中,在复制页面的同时会自动注入一个脚本,使得可以直接访问链接查看网页的效果,不用在点击src文件夹

//导入html-webpack-plugin插件 得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
// new构造函数创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
    // 指定要复制哪个页面
    template: './src/index.html',
    // 指定复制出来的文件名和存放路径
    filename: './index.html'
})
// 使用Node.js中的导出语法,向外导出一个webpack的配置对象
module.exports = {
    // 代表webpack运行的模式,可选值有两个development和production
    mode: 'development',
    // 插件的数组 将来webpack在运行时会加载并调用这些插件
    plugins: [htmlPlugin]
}

通过插件复制到项目根目录的index.html会被放到内存中,插件在生成index.html页面会自动注入打包的index.js文件

devServer节点

// 使用Node.js中的导出语法,向外导出一个webpack的配置对象
module.exports = {
    // 代表webpack运行的模式,可选值有两个development和production
    mode: 'development',
    // 插件的数组 将来webpack在运行时会加载并调用这些插件
    plugins: [htmlPlugin],
    devServer: {
        // 首次打包成功后自动打开浏览器
        open:true,
        // 在http协议中如果端口号为80可以省略
        port:80,
        // 指定主机运行的地址
        host:'127.0.0.1' 
    }
}

处理css文件

在index.js文件中

// 导入样式,在webpack中,一切皆模块,都可以通过es6导入语法进行导入和使用
import './css/index.css'

运行:

npm i style-loader@3.0.0 css-loader@5.2.6 -D

安装处理css文件的loader

//导入html-webpack-plugin插件 得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
// new构造函数创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
    // 指定要复制哪个页面
    template: './src/index.html',
    // 指定复制出来的文件名和存放路径
    filename: './index.html'
})
// 使用Node.js中的导出语法,向外导出一个webpack的配置对象
module.exports = {
    // 代表webpack运行的模式,可选值有两个development和production
    mode: 'development',
    // 插件的数组 将来webpack在运行时会加载并调用这些插件
    plugins: [htmlPlugin],
    devServer: {
        // 首次打包成功后自动打开浏览器
        open:true,
        // 在http协议中如果端口号为80可以省略
        port:8080,
        // 指定主机运行的地址
        host:'127.0.0.1' 
    },
    module: {
        rules:[{
            test:/\.css$/, use:['style-loader', 'css-loader']
        }]
    }
}


相关文章
|
9天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的云的学习笔记系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的云的学习笔记系统附带文章源码部署视频讲解等
12 0
|
13天前
|
JavaScript
Vue 开发中的一些问题简单记录,Cannot find module ‘webpack/lib/RuleSet‘
Vue 开发中的一些问题简单记录,Cannot find module ‘webpack/lib/RuleSet‘
35 1
|
14天前
|
JavaScript 前端开发 应用服务中间件
|
16天前
|
JavaScript
vue 配置【详解】 vue.config.js ( 含 webpack 配置 )
vue 配置【详解】 vue.config.js ( 含 webpack 配置 )
19 0
|
2月前
|
JavaScript 前端开发
构建工具:配置Webpack打包Vue项目
【4月更文挑战第24天】本文介绍了如何配置Webpack来打包Vue项目。首先,Webpack作为模块打包器处理依赖并打包成可执行文件。接着,通过安装Node.js和npm,创建Vue项目,进入项目目录并配置Webpack的入口、输出、加载器和插件。最后,运行构建命令完成打包。理解Webpack基础并按需配置,能优化前端项目构建和开发体验。
|
2月前
|
前端开发 JavaScript 容器
前端vw自适应解决方案,适用pc端以及移动端,适用webpack以及vite,适用vue以及react
前端vw自适应解决方案,适用pc端以及移动端,适用webpack以及vite,适用vue以及react
163 0
|
2月前
|
缓存 移动开发 JavaScript
【学习笔记】Vue Router
【学习笔记】Vue Router
40 0
|
2月前
|
缓存 JavaScript 前端开发
Vue学习笔记(六) 长乐未央
Vue学习笔记(六) 长乐未央
|
2月前
|
JavaScript 前端开发
Vue学习笔记(五) 长乐无极
Vue学习笔记(五) 长乐无极
|
2月前
|
JavaScript 前端开发 C++
Vue学习笔记(四) 久处不厌
Vue学习笔记(四) 久处不厌