webpack的基本使用

最新推荐文章于 2023-12-28 07:27:28 发布

奥吼吼~~

最新推荐文章于 2023-12-28 07:27:28 发布

阅读量101

点赞数

分类专栏： vue 文章标签： webpack的基本使用

本文链接：https://blog.csdn.net/zhoulib__/article/details/102757986

版权

vue 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

介绍
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

初始化环境

npm init

安装webpack

npm i webpack@3.12.0 --save-dev // 高版本的webpack要和webpack-cli一起使用

如果使用是高版本的webpack ，还要记得装webpack-cli

webpack a.js -o b.js
高版本的webpack的一个属性用法 module:{
	rules:{
	[
			test:/.css$/,
			use:['style-loader','css-loader']
		]
	}
}

基本语法

webpack a.js b.js  // 要在当前文件夹下cmd中使用 把a打包成b

在这里插入图片描述
cmd到当前目录

npm run dev  // 会执行webpack ./src/main.js bulid.js
// 将main.js 打包成bulid.js

为什么不直接调用main.js呢？
当我们安装webpack环境后，我就可以使用es7的语法import（和引入模块差不多)

App.vue

<template>
	<!-- 当前组件页面的结构-->
	<div>
		{{msg}}
	</div>
</template>
<script>
	// 当前组件的业务逻辑
	export default { 
		data(){
			return {
				msg:'hello App.vue'
			}
		}
	}
</script>
<style>
	
	/*css样式*/
	body{
		background-color: green;
	}
</style>

main.js

import Vue from 'vue'; // 会自动添加js后缀，这是人webpack写好的
import './style.css'
// 组件  .vue
new Vue({
	el:'#app',
	render:c=>c(App) // 原理是createElement
	// components:{
	// 	App
	// },
	// template:`<App />`
});

这样我就能把这些js打包到一个js中直接使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<div id="app"></div>
	<script src="bulid.js"></script>
</body>
</html>

可以这样使用
这是就是出现一个报错，报错的大概内容就是你缺少一个****-loader，所有无法处理这里的内容，所有我们要加载一些loader模块
在这里插入图片描述

常用loader模块

npm i css-loader style-loader less-loader --save // 分别为解析css style less 的loader模块
npm i url-loader file-loader --save // 为解析路径 和 文件的loader模块
npm i babel-loader --save // 用来解析不同版本的js，主要是解决兼容问题
npm i vue-loader --save // 用来解析vue后缀的文件

loader的用法

module.exports = {
	........,
	 module: {
        loaders: [{
                // /遇到后缀为.css的文件，webpack先用css-loader加载器去解析这个文件
                // 最后计算完的css，将会使用style-loader生成一个内容为最终解析完的css代码的style标签，放到head标签里。
                // webpack在打包过程中，遇到后缀为css的文件，就会使用style-loader和css-loader去加载这个文件。
                test: /\.css$/, // 使用正则来判断后缀名
                loader: 'style-loader!css-loader' // 一个文件可能经过多次解析，解析过程要倒着写，中间用 ! 隔开
            },
            {
                test: /\.(jpg|png|jpeg|gif|svg)$/,
                loader: 'url-loader?limit = 60000&name=[name].[ext]' // 当该图片的字节数小于60000时，会自动生成一个base64码，可以减少对服务器的请求内容
            },
            {
                test: /\.less$/,
                loader: 'style-loader!css-loader!less-loader'
            },
            {
                // 处理es6,7,8
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    presets: ['env'], //处理关键字
                    plugins: ['transform-runtime'], //处理函数
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }

        ]
    },
	........
}

安装webpack开发插件

npm i -g webpack-dev-server

webpack使用需要webpack.dev.config.js（webpack配置文件）其中的内容

package.json中的

在这里插入图片描述
这样可以继续使用npm run dev来打包

var path = require('path');
// const HtmlWebpackPlugin = require('html-webpack-plugin')
// webpack ./main.js  ./build.js
module.exports = {
    // 入口
    entry: {
        // 可以有多个入口，也可以有一个，如果有一个就默认从这一个入口开始分析
        "main": './src/main.js'
    },
    output: {
        path: path.resolve('./dist'), //相对转绝对
        filename: 'build.js'
    },
    watch: true, //文件监视改动 自动产出build.js
}

运行时会报一个这样的错误，这个最新版本的webpack-dev-server必须和vue-cli一起使用，所以我们装一个低版本的
在这里插入图片描述

npm install webpack-dev-server@2.9.0 --save-dev // 安装这个版本的webpack
// 使用时可能会报出确实webpack-cli模块

json中的script中内容

"dev":"webpack-dev-server --open --port 端口号 --contentBase 目录地址 --hot 可以实现页面无刷新的功能，但是只对css管用"
在当前界面的终端

当我们安装这个服务后
可以把package.json修改成

在这里插入图片描述
open—自动打开浏览器，port—设置端口号，contentBase src设置打开后的根目录，hot–更新会以补丁的形式，实现无刷新重载，减少http请求，也叫热更新，热加载。

和上面一样都是对webpack-dev-server的配置

再次修改配置文件

module.exports = {
	 .......,
	 plugins: [
        // 插件的的执行顺序与元素由关
        new HtmlWebpackPlugin({
            template: './index.html', //参照物
        })
    ]
}
// 会参照./index.html这个页面为模板自动生成一个引用bulid.js的html文件

vue-template-complier

用来解析vue文件中的template模块要和vue-loader结合使用

npm i vue-template-complier --save // 安装

使用时要引入

APP.vue文件

<template>
	<!-- 当前组件页面的结构-->
	<div>
		{{msg}}
	</div>
</template>

<script>
	// 当前组件的业务逻辑
	export default {
		data(){
			return {
				msg:'hello App.vue'
			}
		}
	}
</script>

<style>
	
	/*css样式*/
	body{
		background-color: green;
	}
</style>

再来执行npm run dev
可能会出现这样的问题，把vue-loader15版本换成14版本的就好
在这里插入图片描述

奥吼吼~~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack的基本使用

介绍本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。初始化环境npm init 安装webpacknpm i webpack@3.12....
复制链接

扫一扫