webpack

qq_59634946

已于 2023-02-09 20:01:24 修改

阅读量328

点赞数

文章标签： webpack Powered by 金山文档

于 2023-02-09 19:47:37 首次发布

本文链接：https://blog.csdn.net/qq_59634946/article/details/128958979

版权

文章介绍了如何使用Webpack进行前端项目的打包配置，包括设置入口、输出、模式，配置scripts，安装本地服务器，处理HTML模板，清理插件，CSS抽取，Loader处理如css-loader和url-loader，以及Vue项目中的别名设置和Vue组件的处理。

摘要由CSDN通过智能技术生成

1.webpack是一个静态化前端打包器可以把复杂的依赖关系打包为一个或者多个文件，最终生成浏览器可以识别的资源。

2.配置webpack.config.js

const path=require('path')
module.exports={
 entry:'./src/main.js',
    //输出
    output:{
        //目录：当前目录下的dist 目录
        path:path.resolve(__dirname,'dist'),
        //打包好的文件名为bundle.js
        filename:'bundle.js',
    },
 mode:"production",//development开发模式 production产
}

3.配置scripts(自定义命令)

在package.json文件下

"scripts": {
    "build": "webpack",
  },

4.运行打包的命令为npm run bulid

5.安装本地服务器

npm i webpack-dev-server -D

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

6.安装处理html模板插件

npm i html-webpack-plugin -D

// 导入处理html模板插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
    plugins:[
    // 实例化处理html插件
    new HtmlWebpackPlugin({template: './public/index.html'}),
  ],
}

7.安装处理清理模板插件

npm i clean-webpack-plugin -D

// 导入清理插件  npm i clean-webpack-plugin -D
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports={
    plugins:[
    // 实例化清理插件
    new CleanWebpackPlugin(),
  ],
}

8.安装抽出css插件

npm i mini-css-extract-plugin -D

const MiniCssExtractPlugin =  require('mini-css-extract-plugin')
module.exports={
    plugins:[
    // 实例化css抽出插件
     new MiniCssExtractPlugin({filename:'style-[hash:7].css'}),,
  ],
}
//hash命名为了提高二次加载的速度
// 浏览器去get请求地址时候发现文件名没有变之前请求过（一段时间内）从缓存里面取
// 文件没有变，文件名也就不会变化，请求同样的文件从缓存里面取
// 文件内容发生变化，文件名也就变化，请求最新文件
// 通过hash命名合理控制缓存与更新

9.loader 处理器

npm i css-loader style-loader -D

npm i url-loader file-loader -D

css-loader 处理css

style-loader 把css加载到style标签

file-loader 处理文件地址

url-loader处理文件地址把小图片转为base64 省一次网络请求

10.不用vue脚手架创建一个vue

安装处理.vue vue-loader，

编译template vue-template-compiler，

热更新 vue-hot-reload-api，

处理样式 vue-style-loader ，

main.js配置

// 导入创建app的方法
import {createApp} from 'vue'
// 导入根组件
import App from './App.vue'
// 创建实例
createApp(App).mount("#app");

webpack.config.js

module:{
    {test:/\.vue/,use:['vue-loader']},
}

11.别名设置

 resolve:{
    "alias":{
      // 设置src的别名
      "@":path.resolve(__dirname,'src'),
      "$c":path.resolve(__dirname,'component'),
      "$a":path.resolve(__dirname,'api')
    }
  },