webpack2

巴黎の梦

已于 2022-11-24 00:43:28 修改

阅读量93

点赞数

文章标签： webpack javascript 前端

于 2022-11-22 23:58:46 首次发布

本文链接：https://blog.csdn.net/m0_71073278/article/details/127992320

版权

概念

webpack是一个前端打包工具
用它来处理现代前端错综复杂的依赖关系（A插件需要B插件B插件有D插件 F插件需要A插件）生成浏览器可以识别静态资源
Vue 前期脚手架就是用webpack制作（Vue 开始推荐vite构建工具（更快））
react脚手架、angular等现代框架脚手架都是依赖webpack

webpack核心

入口—entry

项目运行的起点
告诉webpack从哪开始打包

出口—output

打包好放入哪
filename 文件名
path 路径

 entry:'./SRC/index.js',//入口
    output:{
        path:__dirname+'/dist',//目录
        filename:'main.js',//打包好的js文件名称
    },//出口

模式—mode

产品模式—production
开发模式—development

loader—加载器

webpack默认只能加载处理js文件
loader让webpack拥有处理其他文件的能力

插件—plugin

webpack运行生命周期过程中做一些其他任务（压缩，清理）

webpack配置

默认webpack.config.js 配置文件中

const {VueLoaderPlugin}=require("vue-loader")
entry:'./src/main.js'
{"test":/\.vue/,use:["vue-loader"]},
new VueLoaderPlugin()

本地服务器—devServer

devServer:{
        host:"localhost",   //域名
        prot:"8080",
        hot:"true",     //热更新
        open:"true"    //是否自动打开浏览器
        proxy:{},      //代理
    }

package.json
"script":{
    "serve":"webpack serve"
}

CSS打包

安装style-loader和 css-loader

1.Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。Loader 可以理解为是模块和资源的转换器。
2.首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css

npm install --save-dev style-loader css-loader

修改webpack.config.js

const path = require("path"); //Node.js内置模块
module.exports = {
    //...,
    output:{},
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

在src文件夹创建style.css

body{
    background:pink;
}

修改main.js

require('./style.css');

浏览器中查看index.html

JS打包

webpack目录下创建配置文件webpack.config.js

const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
   path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件
    }
}
//读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，
//打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

命令行执行编译命令

webpack #有黄色警告
webpack --mode=development #没有警告
#执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩

也可以配置项目的npm运行命令，修改package.json文件

"scripts": {
    //...,
    "dev": "webpack --mode=development"
 }

运行npm命令执行打包

npm run dev

webpack目录下创建index.html

//引用bundle.js
<body>
    <script src="dist/bundle.js"></script>
</body>

浏览器中查看index.html

不要vue脚手架如何搭建项目

安装

npm i vue -S npm i vue-loader vue-template-compiler vue-hot-reload-api vue-style-loader -D
后面几个意思分别是处理.vue 编译vue目录热更新处理vue 样式

配置

导入webpack.config.js中 const {VueLoaderPlugin} = require(“vue-loader”)
配置{test:/.vue$/,use:[“vue-loader”]}
插件plugins:[new VueLoaderPlugin()]

JS

public/main.html
<div id="app"></div>
main.js
import { createApp } from 'vue';
// 导入App.vue
import App from './App.vue';
console.log(App);

// 创建App并挂载
createApp(App).mount("#app")
App.vue
<template >
	<div>
		<h1>你好Vue3</h1>		 
	</div>
</template >