webpack

最新推荐文章于 2024-04-26 00:13:32 发布
最新推荐文章于 2024-04-26 00:13:32 发布
阅读量101 收藏
点赞数
分类专栏： 工具的使用 文章标签： javascript vue js css node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhizhenjin/article/details/108881607
版权

webpack

  • 前端项目的构建工具，基于Node.js开发出来的一个前端工具

  • npm install -g 和npm install --save-dev的关系：网站

  • npm的基本使用方法:网站

  • webpack能做什么

    1. 能处理js文件中的互相依赖的关系

    2. 能处理js中的兼容问题，把一些js中浏览器不能识别的高级语法转化为浏览器能运行的低级语法

    3. 使用：webpack 要打包的文件路径 打包好的输出文件的路径

      1. 例如[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-STYw5GGB-1601434023512)(C:\Users\zzj\AppData\Roaming\Typora\typora-user-images\1584562149610.png)]

  • node.js中的核心api：path

  • 在控制台执行webpack命令时，webpack的工作：

    1. webpack发现没有指定入口和出口

    2. webpack到根目录查找webpack.config.js配置文件

    3. webpack就会解析执行配置文件，解析成功，然后就可以得到配置文件中的导出对象

    4. webpack拿到配置对象后，就可以得到指定的入口和出口，然后进行打包构建

  • cnpm和npm的区别：网站

  • 使用webpack-dev-server这个工具实现，自动打包编译

    1. cnpm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖

    2. cnpm i webpack-cli -D 安装依赖

    3. 因为webpack-dev-server是在本地安装的，因此无法直接当作脚本命令，在控制台中运行

    4. webpack-dev-server如果需要在本地正常运行，必须在本地安装webpack

    5. webpack-dev-server打包生成的文件，并没有存放到实际的物理磁盘上，而是托管到内存中

    6. 配置：

      1. 在package.json文件中进行一下配置
      2. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NMfBrU2E-1601434023514)(C:\Users\zzj\AppData\Roaming\Typora\typora-user-images\1584607508011.png)]

  • webpack处理第三方文件类型的过程

    1. 发现这个处理的文件不是js文件，然后就去配置文件中，查找有没有对应的第三方loader规则

    2. 如果能找到对应的规则，就会调用对应的loader处理这种文件的类型

    3. 在调用loader时，是从后向前调用的

    4. 最后一个loader调用完，会把处理结果交给webpack进行处理打包合并

基本使用

搭建基本的目录结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e1aXNM77-1601434023515)(C:\Users\zzj\AppData\Roaming\Typora\typora-user-images\1584605669890.png)]

  • 使用中文的项目时不能使用npm init -y
  • 在使用js时，如果需要相应的包使用npm i 库名 -D下载

打包js文件方式：

  • webpack 要打包的文件路径 打包好的输出文件的路径

  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0StIYymP-1601434023518)(C:\Users\zzj\AppData\Roaming\Typora\typora-user-images\1584607057767.png)]

  • 自动打包编译：向上有解释

  • 编译运行后希望能自动打开浏览器并且使用指定的端口号，具有热更新

    • 在package.json文件中进行相应的配置

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RbTdheWN-1601434023519)(C:\Users\zzj\AppData\Roaming\Typora\typora-user-images\1584608066017.png)]

    • 在webpack.config.js文件中进行相应的配置

      // 配置文实际就是js文件，通过node中的模块操作，向外暴露一个配置对象
//__dirname指向文件的绝对路径，例如现在代表：/=>根目录
//path.join它的参数都是路径片段，作用将路径进行拼接
const path=require("path");
const webpack  = require("webpack");//启用热更新的第二步
module.exports={
    entry:path.join(__dirname,"./src/main.js"),//配置入口文件的路径，就是需要打包的文件路径
    output:{
        //配置出口文件的路径，就是打包好的文件输出的路径
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js"
    },
    devServer:{//配置dev-server的第二种方式
        open:true,//指定自动打开浏览器
        port:4000,//指定启动时网页的端口
        contentBase:"src",//指定托管的根目录
        hot:true,//启动热更新的第一步
    },
    plugins:[//配置插件的节点
        new webpack.HotModuleReplacementPlugin(),//new 一个热更新的模块对象，这是启用热更新的第三步
    ],
}

    • 在内存中生成html文件

      // 配置文实际就是js文件，通过node中的模块操作，向外暴露一个配置对象
//__dirname指向文件的绝对路径，例如现在代表：/=>根目录
//path.join它的参数都是路径片段，作用将路径进行拼接
const path=require("path");
const webpack  = require("webpack");//启用热更新的第二步

// html-webpack-plugin作用：
//1.自动在内存中生成指定的页面
//2.自动把打包好的bundle.js引用到这个文件中
//3.安装cnpm i html-webpack-plugin -D
const html_webpack_plugin=require("html-webpack-plugin");
module.exports={
    entry:path.join(__dirname,"./src/main.js"),//配置入口文件的路径，就是需要打包的文件路径
    output:{
        //配置出口文件的路径，就是打包好的文件输出的路径
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js"
    },
    devServer:{//配置dev-server的第二种方式
        open:true,//指定自动打开浏览器
        port:4000,//指定启动时网页的端口
        contentBase:"src",//指定托管的根目录
        hot:true,//启动热更新的第一步
    },
    plugins:[//配置插件的节点
        new webpack.HotModuleReplacementPlugin(),//new 一个热更新的模块对象，这是启用热更新的第三步
        new html_webpack_plugin({
            //创建一个在内存中生成html页面的插件
            template:path.join(__dirname,"./src/index.html"),//指定模板页面，以后会根据这个页面路径，去生成内存中的页面
            filename:"index.html"//指定生成的页面名称
        })
    ],
}

      <!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="/bundle.js"></script> -->
    <!-- 使用了html-webpack-plugin后，我们不再需要手动处理bundle.js的引用路径，webpack已经自动创建了一个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>

    • 导入css和less，scss并且配置相应的处理规则

      //js的入口文件

//1.导入Jquery
//2.es6中的一些语法现代浏览器还没有完全支持
import $ from 'jquery'//es6中导入模块的方式


import "./css/index.less"
//使用import语法导入css样式表
import "./css/index.css"

import "./css/index.scss"
//webpack默认只能打包处理js类型的文件，无法处理其他的非js文件
//需要处理一些非js类型的文件，要手动的安装一些第三方loader加载器
//1.如果想要打包处理css文件，需要安装cnpm i style-loader css-loader -D
//2.在webpack.config.js这个配置文件，新增一个节点module是一个对象，然后配置rules属性，rules是一个数组，存放第三方文件的配置和规则

$(function(){
    $("li:odd").css("background","red");
    $("li:even").css("background",function(){
        return "#00f";
    })
})

      // 配置文实际就是js文件，通过node中的模块操作，向外暴露一个配置对象
//__dirname指向文件的绝对路径，例如现在代表：/=>根目录
//path.join它的参数都是路径片段，作用将路径进行拼接
const path=require("path");
const webpack  = require("webpack");//启用热更新的第二步

// html-webpack-plugin作用：
//1.自动在内存中生成指定的页面
//2.自动把打包好的bundle.js引用到这个文件中
//3.安装cnpm i html-webpack-plugin -D
const html_webpack_plugin=require("html-webpack-plugin");
module.exports={
    entry:path.join(__dirname,"./src/main.js"),//配置入口文件的路径，就是需要打包的文件路径
    output:{
        //配置出口文件的路径，就是打包好的文件输出的路径
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js"
        
        //在资源引入时添加一个默认得前缀
        // publicPath:path.join("../dist/")

        //只有在import('路径')时生效
        chunkFilename:"js/[name]_chunk.js"//非入口chunk得名称
        
        
        //为bundle.js中的函数设置变量，以向外暴露
        library:"[name]",
        libraryTarget:"window"//变量暴露在那个对象下
    },
    devServer:{//配置dev-server的第二种方式
        open:true,//指定自动打开浏览器
        port:4000,//指定启动时网页的端口
        contentBase:"src",//指定托管的根目录
        hot:true,//启动热更新的第一步
    },
    plugins:[//配置插件的节点
        new webpack.HotModuleReplacementPlugin(),//new 一个热更新的模块对象，这是启用热更新的第三步
        new html_webpack_plugin({
            //创建一个在内存中生成html页面的插件
            template:path.join(__dirname,"./src/index.html"),//指定模板页面，以后会根据这个页面路径，去生成内存中的页面
            filename:"index.html"
        })
    ],
    module:{
        rules:[//第三方模块的匹配规则
            {test:/\.css$/,use:['style-loader', 'css-loader']},//配置处理.css文件的规则，调用规则时是从右想左处理
            {test:/\.less$/,use:['style-loader', 'css-loader','less-loader']},//配置处理.less文件的规则
            {test:/\.scss$/,use:['style-loader', 'css-loader','sass-loader']},//配置处理.scss文件的规则
        ]
    }
}

  • 默认情况下，webpack无法处理css文件中的url地址，不管是图片还是字体库，这要是url地址

    //安装cnpm i url-loader file-loader -D
//配置规则：
{test:/\.(gif|jpg|png|bmp|jpeg)$/, use:"url-loader?limit=0&name=[hash:8]-[name].[ext]"},//处理图片路径的文件规则

// limit给定的值是图片的大小，单位是byte，如果引用的图片的大小大于等于给定的limit值，会被转为base64的字符串
//图片的大小小于给定的limit值则不会转为base64编码
    
//name=[name].[ext]让wabpack打包图片时生成的图片名字保持不变

//[hash:8]-：在图片的前面放一个8位的hash值

  • bootstrap4和bootstrap3的区别：bootstrap4已经把字体文件给独立出来，如果想要使用字体图标不能通过直接引用bootstrap.css方式进行使用，因此推荐使用bootstrap3：cnpm i bootstrap@v3.3.7 -S

    使用字体图标：
1.在main.js中导入css文件
import "bootstrap/dist/css/bootstrap.min.css"
//通过路径的形式，引入node_modules中的相关文件，可以省略路径前面的node_modules，默认去node_modules中查找相应的文件夹
2.在webpack.config.js中配置相关的loader
{test:/\.(ttf|eot|svg|woff|woff2)$/,use:"url-loader"},//处理字体文件的loader规则

  • webpack默认只能处理一部分es6语法，因此需要通过Babel规则进行相应的语法转换：

    1.安装Babel规则：
a:cnpm i @babel/core @babel/preset-env babel-loader -D
b:cnpm i @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/runtime -D

2.在项目的根目录下创建.babelrc文件：
{
    "presets":["@babel/preset-env"],
    "plugins":["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]
}

3.配置相应的loader规则：
{test:/\.js$/,use:"babel-loader",exclude:/node_modules/}
//在配置babel的loader规则的时候，必须把node_modules目录，通过exclude选项排除

  • webpack中导入vue的过程：

    • 安装vue:cnpm i vue -S

    • 导入：

      导入的过程：
    1.找项目根目录中有没有node_modules的文件夹
    2.在node_modules中根据包名，找对应的vue文件夹
    3.在vue文件夹下，找一个package.json的包配置文件
    4.在package.json文件中，找main属性[main属性指定了这个包在被加载时候的入口文件]
	5.默认导入的包：dist/vue.runtime.common.js
导入的方式：
	第一种：
	1.修改main属性为dist/vue.js
	2.import Vue from "vue"
	第二种：
    1.import Vue from "vue/dist/vue/dist/vue"
	第三种：
    1.import Vue from "vue"
	2.修改webpack.config.js文件，为对象添加一下属性


	//配置解析模块规则
    resolve:{
        //配置解析模块路劲别名：优点简写路径，缺点没有路径提示
        alias:{
            //设置vue被导入时包的路径
            "vue$":"vue/dist/vue.js"
        },
        //配置省略文件名后缀
        extensions:[".css",".js"],
        //告诉webpack解析模块去那个目录找
        modules:[path.resolve(__dirname,"./node_modules")]
    }

  • webpack中使用.vue文件：

    1.安装处理的.vue文件的规则：
cnpm i vue-loader vue-template-compiler vue-loader-plugin -D
2.在webpack.config.js中配置相关的规则
{test:/\.vue$/,use:"vue-loader"}
3.导入插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
4.在plugins节点中配置插件
plugins:[//配置插件的节点
    new VueLoaderPlugin(),
],
5.在main.js导入.vue文件，并用render函数进行处理
import login from "./login.vue"
render(h){
    // h是一个方法，能够把组件渲染为html结构
    return h(login);//return 的结果能够替换el匹配的容器
    //在webpack中想要把一个组件放到页面中去，采用vue实例中的render函数实现
}

  • es6中导入模块，使用 import 模块名称 from “模块标识符” import “路径”

  • es6中，使用export default 和 export 向外暴露成员

  • 在node中module.exports和exports向外暴露成员

  • 在node中使用var 名称=require(“模块标识符”)导入模块

  • 在webpack中使用路由：网站

  • mint-ul是一个vue组件库：网站

  • webpack中按需引入mint-UI报Error: .plugins[0][1] must be an object, false, or undefined:解决方法

  • MUI与bootstrap比较相似：网站

  • MUI不能使用npm下载，需要手动的到github上下载，然后拷贝到项目中

    已经下载好的架包
链接：https://pan.baidu.com/s/1OSbaCkBTcd_xsCq4VUIOkQ 
提取码：01kg

  • 在使用mui时可能会报如下错误：Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mod,解决方法

html中引入img

1.关闭es6模块化，使用commonJS解析图片
{
    test: /\.(gif|jpg|png|bmp|jpeg)$/, use: {
        loader: "url-loader",
        options: {
            name: "[hash:8]-[name].[ext]",
            limit: 0,
            //关闭es6模块化，使用commonJS解析图片    
            esModule:false
        },

    }
}
2.配置html-loader规则
(1.)cnpm i html-loader -D  //负责处理html文件中的img图片，（引入img图片，从而能被url-loader进行处理）
{test:/\.html$/,use:"html-loader"}

插件

mini-css-extract-plugin postcss-loader postcss-preset-env

  • 提取css成单独的文件

    const path=require("path")
const htmlWebpackPlugin=require("html-webpack-plugin")
const webpack=require("webpack")
//提取css
const miniCssExtractPlugin=require("mini-css-extract-plugin")//提取css第一步
//压缩css
const optimizeCssAssetsWebpackPlugin=require("optimize-css-assets-webpack-plugin")
process.env.NODE_ENV="development";


module.exports={
    mode:"development",
    entry:path.join(__dirname,"./src/index.js"),
    output:{
        filename:"js/bundle.js",
        path:path.resolve(__dirname,"dist"),
        //在资源引入时添加一个默认得前缀
        // publicPath:path.join("../dist/")

        //只有在import('路径')时生效
        chunkFilename:"js/[name]_chunk.js",//非入口chunk得名称，就是entry没有指定的名称，
        //为bundle.js中的函数设置变量，以向外暴露
        library:"[name]",//整个库向外暴露的变量名
        libraryTarget:"window"//变量暴露在那个对象下
    },
    module:{
        rules:[
            {test:/\.css$/,use:[
                //创建style标签，并把样式放入
                // {loader:"style-loader"},

                //提取js中的css成单独的文件
                miniCssExtractPlugin.loader,//提取css第二步

                //将css样式整合到js文件中
                {loader:"css-loader"},
                {
                    //提取css第三步
                    loader:"postcss-loader",
                    options:{
                        ident:"postcss",
                        plugins:()=>{
                            require("postcss-preset-env")()
                        }
                    }
                }
            ]},
            {test:/\.less$/,use:[
                {loader:"style-loader"},
                {loader:"css-loader"},
                {loader:"less-loader"}
            ]},
            {test:/\.(jpg|jpeg|png)$/,use:{
                loader:"url-loader",
                options:{
                    name:"[hash:8]-[name].[ext]",
                    limit:0,
                    outputPath:"img",
                    esModule:false
                }
            }},
            {test:/\.(ttf|eot|svg|woff|woff2)$/,use:"url-loader"},
            {test:/\.html$/,use:"html-loader"},
            {test:/\.js$/,use:["babel-loader"],exclude: /node_modules/ },
        ]
    },
    plugins:[
        new htmlWebpackPlugin({
            template:"./src/index.html",
            filename:"index.html"
        }),
        new webpack.HotModuleReplacementPlugin(),
        //提取css第四步
        new miniCssExtractPlugin({
            filename:"css/index.less"
        }),
        new optimizeCssAssetsWebpackPlugin()
    ],
    devServer:{
        open:true,
        contentBase:"src",
        port:4000,
        hot:true,
        compress: true,
        clientLogLevel:"none",
        //在启动时，除了一些基本启动信息以外，其他的都不要打印
        quiet:true,
        //服务器代理--->解决服务器跨域问题
        proxy:{
            "/api":{
                target:"http://localhost:3000",
                //发送请求时，请求路径重写，将/api/xxx----->/xxxx
                pathRewrite:{
                    "^/api":"/api/user"
                }
            },
            
        }
    },
    resolve:{
        // 配置省略文件名后缀
        // extensions:[".css",".js"]
        modules:[path.resolve(__dirname,"./node_modules")]
    }
}

optimize-css-assets-webpack-plugin

  • 压缩css文件

设置代理服务器

devServer:{
    open:true,
    contentBase:"src",
    port:4000,
    hot:true,
    //开启压缩功能
    compress: true,
    clientLogLevel:"none",
    //在启动时，除了一些基本启动信息以外，其他的都不要打印
    quiet:true,
    //服务器代理--->解决服务器跨域问题
    proxy:{
        //当4000服务器匹配到/api请求路径时，会将路径代理到http://localhost:3000/api
        "/api":{
            target:"http://localhost:3000",
            //发送请求时，请求路径重写，将/api/xxx----->/xxxx
        	pathRewrite:{
            	"^/api":"/api/user"
        	}
        },
         
    }
},

设置代理服务器

devServer:{
    open:true,
    contentBase:"src",
    port:4000,
    hot:true,
    //开启压缩功能
    compress: true,
    clientLogLevel:"none",
    //在启动时，除了一些基本启动信息以外，其他的都不要打印
    quiet:true,
    //服务器代理--->解决服务器跨域问题
    proxy:{
        //当4000服务器匹配到/api请求路径时，会将路径代理到http://localhost:3000/api
        "/api":{
            target:"http://localhost:3000",
            //发送请求时，请求路径重写，将/api/xxx----->/xxxx
        	pathRewrite:{
            	"^/api":"/api/user"
        	}
        },
         
    }
},
apeman1024
关注
专栏目录
vue init webpack 依赖的webpack包
09-05
解决vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 20.205.243.166:443问题，方便在https://github.com/vuejs-templates/webpack 不通的时候下载。 使用方法： 1、将webpack放到C...
webpack+typeScript如何使用绝对路径
weixin_40662552的博客
01-20 1321
当我们在开发项目是，如果使用相对路径，那么就会出现类似如下的代码： import Button from '../../../../components/upload/Upload' 很显然，这样的路径很长，如果组件层次很深，那么相对路径就会很长，因此这种情况下很有必要使用绝对路径。 在wepack中，使用alias功能，可以使得我们使用绝对路径。 webpack.config.js的相关配置如下： //webpack.config.js module.exports = { //....
如何在 webpack 项目中使用绝对路径
weixin_30706691的博客
05-30 801
react 小白编程 本项目是使用 create-react-app 脚手架构建的react项目 找到 config 配置文件下的webpack.config.dev.js 和webpack.config.prod.js 文件 打开后找到 alias 字段（如果没有手动添加 alias），给该字段添加 '@':require('path').resolve(__dirname, '....
如何在webpack项目中添加文件夹映射绝对路径
角角兔的博客
09-30 1581
要求（针对的情况） 在webpack项目中有很多的引入是需要加一个特定的前缀的那么怎么映射文件位置呢 例如我需要把 import { xxx } from "src/components/bar/slideBar.vue' 改成更为简单的 import { xxx } from "@bar/slideBar.vue' 需要怎么做呢？ 解决办法 webpack配置文件中加入 module.exp...
(掌握)webpack对文件路径的解析和配置
最新发布
小余的前端博客
04-26 403
resolve.mainFiles的默认值是 [‘index’] (这就是我们引入文件夹下的index能够省略index的原因，因为这里默认找index)默认值是 [‘node_modules’]，所以默认会从node_modules中查找文件。会在文件夹中根据 resolve.mainFiles配置选项中指定的文件顺序查找。我们可以通过设置别名的方式来替换初识模块路径，具体后面讲解alias的配置。的vue就是一个模块路径，会去node_modules查找)
若依vue3,基于webpack(非vite版本)
01-02
2. **Webpack**: Webpack的核心概念是模块化，它通过配置文件（webpack.config.js）来定义如何处理不同类型的文件。Webpack的主要任务包括：模块解析、加载、编译和打包。它支持预处理器（如Sass/LESS for CSS）和后...
手把手搭建h5框架,webpack+jq 与webpack +vue
11-21
手把手搭建h5框架,webpack+jq 与webpack +vue。 1.初始化一个npm项目 2.安装pnpm 3.安装webpack webpack-cli 4.新建webpack.config.js配置文件 5.安装babel 详细安装方式，手把手教程见README.md文档
webpack-develop.zip
11-01
Vue CLI（命令行接口）是官方提供的脚手架工具，它极大地简化了Vue项目的初始化过程，包括设置webpack配置、安装依赖等。在"webpack-develop.zip"这个压缩包中，我们很可能是找到了一个使用Vue CLI 3搭建的开发环境...
在webpack的less中使用绝对路径import
shidaping的博客
08-15 1万+
假设项目目录结构如下   webpack中     resolve.modulesDirectories= [     path.join(__dirname, 'node_modules'),     path.join(__dirname, 'src'), ] 在a.less中写上 @import 'style/b.less';发现会报错，找不到b.less. 正确写法应
[译] Webpack——令人困惑的地方
weixin_33881140的博客
05-09 1031
原文 Webpack—The Confusing Partsissue讨论 Webpack是目前基于React和Redux开发的应用的主要打包工具。我想使用Angular 2或其他框架开发的应用也有很多在使用Webpack。 当我第一次看到Webpack的配置文件时，它看起来非常的陌生，我非常的疑惑。经过一段时间的尝试之后我认为这是因为W...
webpack打包路径问题，生成相对路径
jaxQin
02-23 1万+
webpack打包路径问题，生成相对路径 这里用我们用vue-cli脚手架生成项目举例，go=> 1,找到config文件夹下面的index.js 2, 3,把箭头所指的/去掉 —–搞定 对于所有webpack的同理，只要把打包输出路径的/去掉就可以了
webpack打包，配置路径
Shellin_F的博客
06-21 8687
webpack.config.js文件的配置 正确： /** * Created by Shellin on 2017/6/21. */ module.exports={ entry:'./src/script/main.js', output:{ path: __dirname + '/dist/js', //path: path.reso
vue打包以后 文件指向的js文件路径 或者 配置在二级域名/entry路径下 的问题
csstmg的博客
09-30 550
publicPath module.exports = { // 判断打包处理路径 // publicPath: process.env.NODE_ENV === 'prod' ? '/entryentry' : '', // publicPath: '/static3', publicPath: process.env.NODE_ENV !== 'dev' ? '/index.php?module=Humanman&action=getResourceFilefile&fi
在webpack工程中引用路径@的含义
u011649691的博客
09-11 3931
看webpack配置 build文件夹里的webpack.base.conf.js里面的resolve里面的alias 在引用文件模块的时候后要加上文件的路径：/…/…/xxx.js表示绝对路径、./xxx.js表示相对路径(同一文件夹下的xxx.js)，../表示上一级目录。 如果既不加/…/、../又不加./的话，则该模块要么是核心模块，要么是从一个node_modules文件夹加载。...
Webpack打包路径问题
thinshootout的博客
04-08 2647
Webpack打包路径缺省为绝对路径。 如果想把打包路径改为相对自定义路径，对于build环境(即最终一般会部署到proxy后)，需要修改config/index.js中的build段中的assetsPublicPath即可。 ... ... module.exports = { dev: { // Paths assetsSubDirectory: 'static',...
webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用
weixin_33921089的博客
09-04 553
资源相对引用路径 问题描述 一般情况下，通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。 但当部署到带有文件夹的项目中，这种绝对路径就会出现问题，因为把配置的static文件夹当成了根路径，那么要解决这种问题，就得引用相对路径。 解决办法 打开webpack.prod.conf.js 找到output：增加 ...
webpack -- 资源和css中图片引用打包为相对路径的方案
热门推荐
积少成多
07-18 1万+
欢迎访问我的个人博客：http://www.xiaolongwu.cn 前言 最近在用vue-cli+webpack做项目，项目架构搭好了之后，想build之后看看效果，但是build出来的index.html文件中的默认资源引用都是绝对路径，也就是相对于根目录的绝对路径；但是我项目如果部署到线上也不一定是在根目录里呀，所以这种默认相对于根目录的绝对路径肯定是不实用的； 解决方案 ...
Webpack入门与安装指南
"Webpack学习笔记是一个详细的指南，介绍了webpack的基本概念、安装方法以及配置过程。主要涵盖以下几个知识点： 1. 模块打包工具： Webpack是一个强大的模块打包工具，它支持两种模块导入规范：ESmodule（如`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值