webpack学习记录

已于 2023-03-16 09:49:46 修改
阅读量243 收藏
点赞数
文章标签： 学习 Powered by 金山文档
于 2023-03-15 11:36:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28749759/article/details/129544969
版权

（1）起步

1、安装

1.1、创建一个目录

输入命令：mkdir webpack_demo

1.2、进入目录

输入命令：cd webpack_demo

1.3、初始化 npm

生成package.json文件 输入命令：npm init -y

1.4、在本地安装 webpack webpack-cli

安装一些项目依赖的包在node_modules文件夹内

输入命令：npm install webpack webpack-cli --save-dev

2、构建文件目录

在根目录件夹中新建两个文件夹，分别为 src 文件夹和 dist 文件夹

index.html --放在 src 文件夹下；

main.js --放在 src 文件夹的js文件夹中；

common.css --放在 src 文件夹的css文件夹中；

3、配置 webpack.config.js

3.1、在当前项目的根目录下新建一个配置文件 webpack.config.js 配置如下：
const path = require('path');  // 处理绝对路径

module.exports = {
    entry: './src/js/main.js',  // 入口文件
    output: {
        path: path.resolve(__dirname, 'dist'),  //打包后的文件存放的地方
        filename: 'js/bundle.js',  //打包后输出文件的文件名
    },
};

输入命令：npx webpack --config webpack.config.js

会生在dist文件夹下生成 js文件夹下的bundle.js文件

注意：

生成的bundle.js文件路径和输出文件filename: 'js/bundle.js'设置有关 这里设置的是包含js的文件夹名bundle.js内容为空是因为我们创建main.js为空

3.2、设置打包快捷方式(代码红色部分为这次新增)

考虑到用 CLI 这种方式来运行本地的 webpack 副本并不是特别方便，我们可以设置一个快捷方式。调整 package.json 文件，添加一个 npm script：

{

"name": "webpack_demo5",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"build": "webpack"

},

"keywords": [],

"author": "",

"license": "ISC",

"devDependencies": {

"webpack": "^5.76.1",

"webpack-cli": "^5.0.1"

}

}

现在，可以使用 npm run build 命令，来替代我们之前使用的 npx 命令

4、配置 mode

告知 webpack 使用相应模式的内置优化，如果没有设置，webpack 会给 mode 的默认值设置为 production（生产模式），页面会被压缩

4.1、webpack.config.js 配置如下：

红色代码为此次新增内容

const path = require('path'); // 处理绝对路径

module.exports = {

entry: './src/js/main.js', // 入口文件

output: {

path: path.resolve(__dirname, 'dist'), //打包后的文件存放的地方

filename: 'js/bundle.js', //打包后输出文件的文件名

},

mode: 'development', //设置为开发模式

};

（2）管理资源

代码红色部分为这次新增

1、加载 CSS

为了在 JavaScript 模块中 import 一个 CSS 文件，你需要安装 style-loader 和 css-loader，并在 module 配置 中添加这些 loader：

输入命令：npm install --save-dev style-loader css-loader

webpack.config.js配置如下：

const path = require('path'); // 处理绝对路径

module.exports = {

entry: './src/js/main.js', // 入口文件

output: {

path: path.resolve(__dirname, 'dist'), //打包后的文件存放的地方

filename: 'js/bundle.js', //打包后输出文件的文件名

},

module: {

rules: [

{

test: /\.css$/i,

use: ['style-loader', 'css-loader'],

},

],

},

};

完成后package.json文件内容如下：

{

"name": "webpack_demo5",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"keywords": [],

"author": "",

"license": "ISC",

"devDependencies": {

"css-loader": "^6.7.3",

"style-loader": "^3.3.2",

"webpack": "^5.76.1",

"webpack-cli": "^5.0.1"

}

}

可以在src文件夹下common.css文件中写点东西了

html,body{
    padding: 0;
    margin: 0;
}
body{
    background-color: red;  //给body设置背景颜色
}
ul,li{
    list-style: none;
}

然后在src文件夹下的main.js文件里引入common.css ,写法如下：

import '../css/common.css';

然后在src文件夹下的index.html文件里引入打包的js文件

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<script src="../dist/js/bundle.js"></script> //注意引入的是打包生成的js文件

</body>

</html>

然后我们输入命令就可以直接打包

输入命令：npm run build

打开这个index.html 就可以看到页面背景色变成红色了

检查看下代码 会发现样式用style插入到页面

1.1、加载其他格式CSS
1.1.1、处理.less文件 webpack 将 .less 编译为 .css

安装 less 和 less-loader

输入命令：npm install less less-loader --save-dev

webpack.config.js配置如下：

const path = require('path'); // 处理绝对路径

module.exports = {

entry: './src/js/main.js', // 入口文件

output: {

path: path.resolve(__dirname, 'dist'), //打包后的文件存放的地方

filename: 'js/bundle.js', //打包后输出文件的文件名

},

module: {

rules: [

{

test: /\.css$/i,

use: ['style-loader', 'css-loader'],

},

{

test: /\.less$/i,

use: ['style-loader', 'css-loader','less-loader'],

},

],

},

};

完成后package.json文件devDependencies的内容如下：

"devDependencies": {

"css-loader": "^6.7.3",

"less": "^4.1.3",

"less-loader": "^11.1.0",

"style-loader": "^3.3.2",

"webpack": "^5.76.1",

"webpack-cli": "^5.0.1"

}

在src文件夹的css文件夹中新建less.less文件测试下是否成功

ul{

background-color: #ffffff;

li{

line-height: 24px;

color: #666a80;

}

}

然后在src文件夹下的main.js文件里引入less.less ,写法如下：

import '../css/less.less';

然后打包 输入命令：npm run build

检查看下代码 看看上边新写的.less样式是否会以style插入到页面

1.1.2、处理.sass文件 webpack 将 .sass 编译为 .css

和上边less步骤一样 我就简单写下

安装 sass 和 sass-loader

输入命令：npm install sass-loader sass webpack --save-dev

webpack.config.js新增配置如下：

{

test: /\.s[ac]ss$/i,

use: ['style-loader', 'css-loader','sass-loader'],

},

完成后package.json文件devDependencies的内容如下：

"devDependencies": {

"css-loader": "^6.7.3",

"less": "^4.1.3",

"less-loader": "^11.1.0",

"sass": "^1.59.3",

"sass-loader": "^13.2.0",

"style-loader": "^3.3.2",

"webpack": "^5.76.1",

"webpack-cli": "^5.0.1"

}

完成后测试看看新写的.sass样式是否会以style插入到页面

2、加载 images 图像

在 webpack 5 中，可以使用内置的 Asset Modules，我们可以轻松地将这些内容混入我们的系统中

webpack.config.js新增配置如下：

{

test:/\.(png|jpg|jpeg|svg|gif)$/i,

type: 'asset',

parser: {

dataUrlCondition: {

maxSize: 4 * 1024 // 小于4kb图片会转为base64格式

}

},

generator: {

filename: 'images/[name][hash:8][ext]'

}

},

预览效果：

3、加载 fonts 字体

使用 Asset Modules 可以接收并加载任何文件，然后将其输出到构建目录

webpack.config.js新增配置如下：

{

test: /\.(woff|woff2|eot|ttf|otf)$/i,

type: 'asset/resource',

generator: {

filename: 'font/[name][hash:8][ext]'

}

},

在阿里巴巴矢量图库https://www.iconfont.cn/ 下载图标代码

然后在项目页面使用

在src文件夹下的main.js文件里引入iconfont.css ,写法如下：

import '../css/iconfont.css';

还需要修改样式文件里的路径

预览效果：

（3）管理输出

  1. 设置 HtmlWebpackPlugin

1.1、安装插件

输入命令：npm install --save-dev html-webpack-plugin

完成后package.json文件devDependencies的内容如下：

"devDependencies": {

"css-loader": "^6.7.3",

"html-webpack-plugin": "^5.5.0",

"less": "^4.1.3",

"less-loader": "^11.1.0",

"sass": "^1.59.3",

"sass-loader": "^13.2.0",

"style-loader": "^3.3.2",

"webpack": "^5.76.1",

"webpack-cli": "^5.0.1"

}

1.2、webpack.config.js新增配置如下：

const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [

new HtmlWebpackPlugin({

inject:'body',

template:path.resolve(__dirname,'src/index.html') //指定模板文件

}),

],

然后删掉src文件夹下index.html文件中引入的js文件的

然后我们输入命令打包

输入命令：npm run build

dist文件夹下会生成一个以src下index.html文件为模板的index.html文件

dist/index.html内容如下：

和src文件下index.heml一样

  1. 清理 /dist 文件夹

在每次构建前清理 /dist 文件夹，这样只会生成用到的文件，使用 output.clean 配置项实现这个需求

2.1、webpack.config.js新增配置如下：

只需在output里加入：clean: true就行

output: {

path: path.resolve(__dirname, 'dist'), //打包后的文件存放的地方

filename: 'js/bundle.js', //打包后输出文件的文件名

clean: true,

},

注意clean: true是 webpack5的新特性

现在执行 npm run build，检查 /dist 文件夹，现在只会看到构建后生成的文件，而没有旧文件

（4）优化

1、将 CSS 提取到单独的文件中

为每个包含 CSS 的 JS 文件创建一个 CSS 文件

1.1、安装 mini-css-extract-plugin

输入命令：npm install --save-dev mini-css-extract-plugin

完成后package.json文件devDependencies的内容如下：

"devDependencies": {

"css-loader": "^6.7.3",

"html-webpack-plugin": "^5.5.0",

"less": "^4.1.3",

"less-loader": "^11.1.0",

"mini-css-extract-plugin": "^2.7.3",

"sass": "^1.59.3",

"sass-loader": "^13.2.0",

"style-loader": "^3.3.2",

"webpack": "^5.76.1",

"webpack-cli": "^5.0.1"

}

建议 mini-css-extract-plugin 与 css-loader 一起使用

1.2、webpack.config.js配置如下：

const path = require('path'); // 处理绝对路径

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //将CSS提取到单独的文件中

module.exports = {

entry: './src/js/main.js', // 入口文件

output: {

path: path.resolve(__dirname, 'dist'), //打包后的文件存放的地方

filename: 'js/bundle.js', //打包后输出文件的文件名

},

module: {

rules: [

{

test: /\.css$/i,

use: [MiniCssExtractPlugin.loader, 'css-loader'],

},

{

test: /\.less$/i,

use: [MiniCssExtractPlugin.loader, 'css-loader','less-loader'],

},

{

test: /\.s[ac]ss$/i,

use: [MiniCssExtractPlugin.loader, 'css-loader','sass-loader'],

},

],

},

plugins: [

new MiniCssExtractPlugin({

filename: 'css/[name]_bundle.css', //输出文件的文件名

}),

],

};

生成的index.html文件中会插入如下代码：

<link href="css/main_bundle.css" rel="stylesheet"></head>

替代了之前生成的<style>……</style>

2、将 HTML 导出为字符串

2.1、安装 html-loader

输入命令：npm install --save-dev html-loader

完成后package.json文件devDependencies的内容如下：

"devDependencies": {

"css-loader": "^6.7.3",

"html-loader": "^4.2.0",

"html-webpack-plugin": "^5.5.0",

"less": "^4.1.3",

"less-loader": "^11.1.0",

"mini-css-extract-plugin": "^2.7.3",

"sass": "^1.59.3",

"sass-loader": "^13.2.0",

"style-loader": "^3.3.2",

"webpack": "^5.76.1",

"webpack-cli": "^5.0.1"

}

2.1、webpack.config.js新增配置如下：

module: {

rules: [

{

test: /\.html$/i,

loader: "html-loader",

},

],

},

配置完打包后 .html文件中的图片可正确显示出来

3、使用jquery

3.1、安装 jquery

输入命令：npm install jquery --save

完成后package.json文件新增内容如下：

"dependencies": {

"jquery": "^3.6.4"

}

3.2、安装expose-loader

允许暴露一个模块（整体或者部分）给全局对象

输入命令：npm install expose-loader --save-dev

完成后package.json文件devDependencies的内容如下：

"devDependencies": {

"css-loader": "^6.7.3",

"expose-loader": "^4.1.0",

"html-loader": "^4.2.0",

"html-webpack-plugin": "^5.5.0",

"less": "^4.1.3",

"less-loader": "^11.1.0",

"mini-css-extract-plugin": "^2.7.3",

"sass": "^1.59.3",

"sass-loader": "^13.2.0",

"style-loader": "^3.3.2",

"webpack": "^5.76.1",

"webpack-cli": "^5.0.1"

},

3.3、webpack.config.js新增配置如下：

module: {

rules: [

{

test: require.resolve("jquery"),

loader: "expose-loader",

options: {

exposes: ["$", "jQuery"],

},

},

],

},

3.4、文件中引用

在src文件夹下的main.js文件里引入jquery ,写法如下：

import $ from "jquery";

添加代码看看效果：

$('img').css({

'width':'50%',

'display':'block',

'margin':'0 auto'

});

打包看看

4、添加厂商前缀

使用 PostCSS 处理 CSS 的 loader

4.1、安装postcss-loader

输入命令：npm install --save-dev postcss-loader postcss

完成后package.json文件devDependencies的内容如下：

"devDependencies": {

"css-loader": "^6.7.3",

"expose-loader": "^4.1.0",

"html-loader": "^4.2.0",

"html-webpack-plugin": "^5.5.0",

"less": "^4.1.3",

"less-loader": "^11.1.0",

"mini-css-extract-plugin": "^2.7.3",

"postcss": "^8.4.21",

"postcss-loader": "^7.0.2",

"sass": "^1.59.3",

"sass-loader": "^13.2.0",

"style-loader": "^3.3.2",

"webpack": "^5.76.1",

"webpack-cli": "^5.0.1",

"webpack-dev-server": "^4.12.0"

},

4.2、安装postcss-preset-env

输入命令：npm install --save-dev postcss-preset-env

完成后package.json文件devDependencies的内容如下：

"devDependencies": {

"css-loader": "^6.7.3",

"expose-loader": "^4.1.0",

"html-loader": "^4.2.0",

"html-webpack-plugin": "^5.5.0",

"less": "^4.1.3",

"less-loader": "^11.1.0",

"mini-css-extract-plugin": "^2.7.3",

"postcss": "^8.4.21",

"postcss-loader": "^7.0.2",

"postcss-preset-env": "^8.0.1",

"sass": "^1.59.3",

"sass-loader": "^13.2.0",

"style-loader": "^3.3.2",

"webpack": "^5.76.1",

"webpack-cli": "^5.0.1",

"webpack-dev-server": "^4.12.0"

},

4.3、webpack.config.js新增配置如下：

{

test: /\.css$/i,

use: [

MiniCssExtractPlugin.loader,

'css-loader',

{

loader: 'postcss-loader',

options: {

postcssOptions: {

plugins: ['postcss-preset-env'],

},

},

},

],

},

4.4、在package.json文件中新增如下内容：

"browserslist": [

"iOS 7.1",

"last 2 versions",

">0%"

]

当前项目的浏览器兼容情况

5、热更新

快速开发应用程序

5.1、安装webpack-dev-server

输入命令：npm install --save-dev webpack webpack-dev-server

完成后package.json文件devDependencies的内容如下：

"devDependencies": {

"css-loader": "^6.7.3",

"expose-loader": "^4.1.0",

"html-loader": "^4.2.0",

"html-webpack-plugin": "^5.5.0",

"less": "^4.1.3",

"less-loader": "^11.1.0",

"mini-css-extract-plugin": "^2.7.3",

"sass": "^1.59.3",

"sass-loader": "^13.2.0",

"style-loader": "^3.3.2",

"webpack": "^5.76.1",

"webpack-cli": "^5.0.1",

"webpack-dev-server": "^4.12.0"

},

5.2、webpack.config.js新增配置如下：

devServer: {

compress: true,

port: 9000,

open: true

},

输入命令：npx webpack serve

就自动打开页面了

可以尝试下修改js、css文件浏览器是自动刷新的

5.3、修改.html文件 浏览器自动刷新

需在src文件夹下的main.js文件里引入.html文件 ,写法如下：

import '../index.html';

停止正在运行的本地服务器

命令行输入命令：Ctrl + C

6、优化css相关loader

封装方法 优化css相关loader

6.1、修改代码如下webpack.config.js：

function dealStyle(isvalue){

return [

MiniCssExtractPlugin.loader,

'css-loader',

{

loader: 'postcss-loader',

options: {

postcssOptions: {

plugins: ['postcss-preset-env'],

},

},

},

isvalue

].filter(Boolean);

}

{

test: /\.css$/i,

use: dealStyle(),

},

{

test: /\.less$/i,

use: dealStyle('less-loader'),

},

{

test: /\.s[ac]ss$/i,

use: dealStyle('sass-loader'),

},

6.2、整体配置如下webpack.config.js：
const path = require('path');  // 处理绝对路径
const MiniCssExtractPlugin = require("mini-css-extract-plugin");  //将CSS提取到单独的文件中
const HtmlWebpackPlugin = require('html-webpack-plugin');

//用来获取处理样式的loader
function dealStyle(isvalue){
    return [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
            loader: 'postcss-loader',
            options: {
                postcssOptions: {
                    plugins: ['postcss-preset-env'],
                },
            },
        },
        isvalue
    ].filter(Boolean);
}

module.exports = {
    entry: './src/js/main.js',  // 入口文件
    output: {
        path: path.resolve(__dirname, 'dist'),  //打包后的文件存放的地方
        filename: 'js/bundle.js',  //打包后输出文件的文件名
        clean: true,
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: dealStyle(),
            },
            {
                test: /\.less$/i,
                use: dealStyle('less-loader'),
            },
            {
                test: /\.s[ac]ss$/i,
                use: dealStyle('sass-loader'),
            },
            {
                test:/\.(png|jpg|jpeg|svg|gif)$/i,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 4 * 1024
                    }
                },
                generator: {
                    filename: 'images/[name][hash:8][ext]'
                }
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'font/[name][hash:8][ext]'
                }
            },
            {
                test: /\.html$/i,
                loader: "html-loader",
            },
            {
                test: require.resolve("jquery"),
                loader: "expose-loader",
                options: {
                    exposes: ["$", "jQuery"],
                },
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            inject:'body',
            template:path.resolve(__dirname,'src/index.html')  //指定模板文件
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name]_bundle.css',
        }),
    ],
    mode:'development',
    devServer: {
        compress: true,
        port: 9000,
        open: true  //npx webpack serve命令打开热更新
    },
};
qq_28749759
关注
Webpack入门的关键知识点
Geolage Wu 的博客
02-07 2103
关于Webpack 总所周知，Webpack 是一个前端资源加载（打包）工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。其它更多的不在这里赘述，如想了解更多详情，请移步至 Webpack官网 查看。下面来说说Webpack的那些重要的知识点。 概念 entry entry是用来指明入口js文件的配置项，入口文件可以是一个或多个。 // 单...
webpack学习笔记
热门推荐
zhbhun的专栏
08-02 1万+
是什么webpack是一个模块打包工具，通过依赖处理模块，并生成那些模块静态资源。 观察上图，webpack把所有的资源（js，css和图片等）都当做是模块——webpack中可以引用css，css中可以嵌入图片dataUrl，对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后 生成了优化且合并后的静态资源。为什么当今网站正在变成一个we
Vue项目中svg的使用
sleepwalker_1992的专栏
06-21 2156
1、安装依赖 npm install svg-sprite-loader --save-dev 2、所有svg图标放到src/assets/icons/svg文件夹下，并在src/assets/icons下创建文件index.js const req = require.context('./svg', false, /\.svg$/) const requireAll = requireContext => requireContext.keys().map(requireConte
webpack 3.0 配置说明
老愚公的博客
03-16 5144
webpack 我们使用webpack主要完成以下功能： 1. 编译js代码 2. 提取，分割js代码 3. 编译sass代码 4. 压缩js代码 5. 压缩css代码 6. 生成页面 7. 调试 8. 其他 webpack配制 webapck配制中最主要的是4个部分： * entry * output * loaders * plugins Entry ...
webpack进阶，前端开发网页
最新发布
2401_83947105的博客
03-28 750
定义校验规则},定义babelLoader// babel.transform用来编译代码的方法// 是一个普通异步方法// util.promisify将普通异步方法转化成基于promise的异步方法// 获取loader的options配置// 校验babel的options的配置});// 创建异步// 使用babel编译代码plugins“from”: {},“to”: {},},// 验证options是否符合规范})
vue-cli4.5生成vue3的内置webpack配置
大赚万万亿
12-01 1335
生产环境 { mode: 'production', context: '/Users/sin/diynews/vue3clie/aasd', devtool: 'source-map', node: { setImmediate: false, process: 'mock', dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', child_process: 'empt
webpack学习笔记之代码分割和按需加载的实例详解
12-01
Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。在构建大型应用时，随着代码量的增加，一次性加载所有代码可能导致页面加载速度变慢，用户体验下降。为了解决这个问题，Webpack 提供了代码分割（Code ...
webpack：:scroll:一些节点教程-《 Webpack学习笔记》
02-06
Webpack 是一个流行的模块...通过《Webpack学习笔记》这样的教程，你可以逐步掌握Webpack的基础和进阶用法，将其有效地应用于项目中，实现高效、模块化的前端开发。在学习过程中，不断实践和查阅官方文档是至关重要的。
详解webpack babel的配置
11-28
Babel是什么 Babel是一个编译JavaScript的平台，它的强大之处表现在可以通过编译帮你达到： 使用下一代的javascript（ES6，ES7,……）代码，即使当前浏览器没有完成支持； 使用基于JavvScript进行扩展语言，比如React的JSX； npm i babel-core babel-preset-env babel-loader babel-plugin-transform-runtime babel-preset-stage-2 -D 关于babel的使用 首先 babel-preset-es2015 已经废弃，你可以使用 babel-preset-en
webpack3.0基础配置项目
07-11
webpack3.0基础配置，希望对大家有帮助，仅供才考，共同学习。
webpack学习笔记之优化缓存、合并、懒加载
01-19
除了的webpack基本配置，还可以进一步添加配置，优化合并文件，加快编译速度。下面是生产环境配置文件webpack.production.js，与wenbpack.config.js相比其不需要一些dev-tools,dev-server和jshint校验等，将与开发...
如何搭建一个完整的Vue3.0 + ts 的项目
sinat_28371057的博客
12-13 4927
如何搭建一个完整的Vue3.0 + ts 的项目 相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段（最终产品的候选版本，如果没有问题则可发布成为正式版本）。所以Vue3.0的学习是我们必然的趋势，今天，主要分享一下Vue3.0的详细搭建过程，希望可以为初入Vue3的小伙伴有所帮助。 我们现在开始进入今天的主题啦~~ 一、安装 1. 安装nodejs 此处提供nodejs下载地址：https://nodejs.org/zh-cn/dow..
webpack.config.js中mudule的配置释义
sinat_36227086的博客
08-24 472
mudule是对于不同的模块的处理规则。 module的rules属性代表不同的处理规则。rules是一个对象。对象的属性有test、use、exclude、include。 use属性是对象数组。 对象的参数为loader/options。 总结： Rule.loader是Rule.use[{loader}简写 Rule.options是Rule.use[ {loptions}]缩写 ...
vue项目打包需要修改的路径问题
知其白，守其黑；和其光，同其尘。
03-09 6019
博客园 首页 新随笔 联系 管理 订阅订阅 随笔- 55 文章- 0 评论- 1 vue-cli项目打包需要修改的路径问题 命令行输入：npm run build 打包出来后项目中就会多了一个文件夹dist，这就是我们打包过后的项目。 第一个问题，文件引用路径。我们直接运行打包后的文件夹中的index.html文件，会看到网页一片空白，f12调试，全是css，js路径引用错误的问...
Vue实战项目中的一些技巧
斗师——Ace
01-14 2323
1.vue-cli3+搭建vue项目：https://blog.csdn.net/qq_42231156/article/details/82949962。 2. 如果vue-cli3+没有创建vue.config.js文件，就在项目根目录下创建一个vue.config.js： const path=require('path') const bodyParser=require('bod...
整理项目中vue.config.js打包优化
牛先森家的博客
02-15 771
项目中vue.config.js打包优化
在项目中安装、使用less-loader、less用于处理less格式文件
qq_46112274的博客
02-15 8043
在项目中安装、使用less-loader、less用于处理less格式文件1、安装配置2、配置3、案例：使用less-loader和less 在项目中安装less-loader，用于加载less文件 webpack中文网安装less-loader参考 1、安装配置 版本号与项目中webpack版本要对应，不然安装不成功 如果安装过程中，出错先使用以下命令： 出错参考 npm i --legacy-peer-deps 使用命令安装less-loader和less: npm install --save-de
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值