Webpack最佳实践

先简单回顾下 webpack 原理

Webpack 可以看做是模块打包机，把解析的所有模块变成一个对象，然后通过入口模块去加载我们的东西，然后依次实现递归的依赖关系，通过入口来运行所有的文件。由于 webpack 只认识js，所以需要通过一系列的 loader 和 plugin 转换成合适的格式供浏览器运行。

  • loader 主要是对资源进行加载/转译的预处理工作，其本质是一个函数，在该函数中对接收到的内容进行转换，返回转换后的结果。某种类型的资源可以使用多个 loader，执行顺序是从右到左，从下到上。
  • plugin（插件）主要是扩展 webpack 的功能，其本质是监听整个打包的生命周期。webpack 基于事件流框架 Tapable， 运行的生命周期中会广播出很多事件，plugin 可以监听这些事件，在合适的时机通过 webpack 提供的 API 改变输出结果。

webpack 安装

新建一个目录，进入目录初始化 package.json，并安装 webpack 依赖

// 初始化包
npm init -y

// 安装依赖
npm i webpack webpack-cli -D

基础配置

webpack 默认配置文件名字为 webpack.config.js，于是在项目根目录下新建一个名为 webpack.config.js 的文件，在配置文件里写最简单的单页面配置：

let path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/js/index.js", 
  output: {
    filename: "js/bundle.js", 
    path: path.resolve("dist"),
    publicPath: "http://cdn.xxxxx"
  }
}

配置详解

  • mode - 打包模式

    • development 为开发模式，打包后代码不会被压缩
    • production 为生产模式，打包后代码为压缩代码
  • entry - 入口文件

  • output - 打包文件配置

    • filename：打包后文件，filename 的值可设置成带 hash 戳的文件：js/bundle.[hash].js / js/bundle.[hash:8].js（只显示 8 位 hash 戳）
    • path：打包文件路径，需为绝对路径
    • publicPath：上线的cdn地址
TIP: 上述代码中 path 为内置模块，无需安装，直接引入即可。

新建后还需在项目根目录下的 src/js 目录下新建 index.js 文件，然后随便输入一句 js 代码。

配置后可使用 webpack 命令尝试打包，若报错找不到命令可 npm i webpack -g 全局安装后再打包，打包成功后会输出到项目根目录下的 dist 目录。

项目目录结构大致如下

├─package.json
├─webpack.config.js
├─src
|  ├─js
|  | └index.js
├─dist

html 文件打包

由于 webpack 只认识 js，因此需通过 html-webpack-plugin 插件打包 html 文件

npm i html-webpack-plugin -D

安装后在 webpack.config.js 配置文件中

let HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    plugins: [        new HtmlWebpackPlugin({          template: "./src/index.html"        })    ]
}

production 模式下可以开启 html 文件的压缩配置：

plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      minify: { removeAttributeQuotes: true, collapseWhitespace: true }, 
      hash: true
    })
]

配置详解

  • plugins - webpack 插件配置

    • html-wepack-plugin配置

      • template - html 模板文件的相对/绝对路径

      • minify - 压缩配置

        • removeAttributeQuotes：删除属性双引号
        • collapseWhitespace：代码压缩成一行
      • hash - 引入文件带上hash戳
TIP： 如果不指定模板 template 配置，将是插件默认的 html文件，而不是项目中的 html 文件

开启服务

webpack 通过安装 webpack-dev-server 开启服务

npm i webpack-dev-server -D

配置 webpack.config.js

devServer: {
    port: 5000,
    compress: true,
    open: true,
    client: { progress: true }
}

配置详解

  • devServer - webpack-dev-server 配置

    • port - 端口号
    • compress - 开启 gzip 压缩
    • open - 启动后自动把页面打开

    • client

      • progress：在浏览器中以百分比显示编译进度

配置好可运行 webpack-dev-server 命令查看效果，若找不到命令可 npm i webpack-dev-server -g 全局安装下

跨域

开发过程中容易遇到接口跨域问题，可通过 devServer.proxy 配置解决

假设接口地址为 http://localhost:3000/api/users，对 /api/users 的请求可如下配置

devServer: {
    proxy: {
      '/api': 'http://localhost:3000',
    },
},

但实际项目中接口的地址有很多种可能，一般不会有 /api 目录，即一般接口地址为http://localhost:3000/users，因此枚举配置会很麻烦，可通过代理请求解决

即先请求 http://localhost:3000/api/users 接口地址，然后通过 devServer 代理到 http://localhost:3000/users

本文通过 express 开启接口服务，接口地址为 http://localhost:3000/user，接口代码不再赘述，后期上传完整的源码，可通过 node "项目路径\webpack5\src\js\server.js" 启动接口服务，然后配置 webpack.config.js

devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:3000/",
        pathRewrite: {
          "/api": ""
        },
      },
    }
}

devServer 配置详解

  • proxy - 代理配置

    • target - 接口域名
    • pathRewrite - 接口路径重写，把请求代理到接口服务器上

    参考 webpack面试题详细解答

mock 接口数据

当后端接口没有写好，又不希望被阻塞进度，可以通过 mock 前期跟后端约定好的接口数据格式来模拟调试页面。可使用有自定义函数和应用自定义中间件的能力的配置 devServer.setupMiddlewares，在 middlewares.unshift 中的回调函数使用 res.send 把需要 mock 的数据传递进去：

devServer: {
    setupMiddlewares: (middlewares, devServer) => {
        if (!devServer) {
        throw new Error("webpack-dev-server is not defined");
        }

        middlewares.unshift({
            name: "user-info",
            // `path` 是可选的，接口路径
            path: "/user",
            middleware: (req, res) => {
              // mock 数据模拟接口数据
              res.send({ name: "moon mock" });
            },
        });

        return middlewares;
    },
}

样式处理

样式处理需要用到的 loader 及其作用：

  • less-loader：加载和转译 LESS 文件
  • postcss-loader：使用 PostCSS 加载和转译 CSS/SSS 文件，如可以处理 autoprefixer css 包，为css添加浏览器前缀
  • css-loader：解析 @import and url() 语法，使用 import 加载解析后的css文件，并且返回 CSS 代码
  • mini-css-extract-plugin 的 loader：抽取出 css 文件，通过 link 标签引入 html 文件

安装依赖，若使用的是 sass，则把 less less-loader 换成 node-sass sass-loader 即可

npm i mini-css-extract-plugin css-loader postcss-loader autoprefixer less-loader less -D

配置 webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 

module.exports = {
    plugins: [
        new MiniCssExtractPlugin({
          filename: "css/main.css", // 抽离的css文件名
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
            },
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "less-loader"],
            },
        ]
    }
}

还需新建并配置 postcss.config.js

module.exports = {
  plugins: [require("autoprefixer")]
};

上述文件配置好后，打包后会发现 css3 样式还是没有添加前缀，还需配置 package.json 的 browserlist 才能生效

"browserslist": [
    "last 1 version",
    "> 1%",
    "IE 10"
],

js 处理及语法校验

es6 或更高级的语法需转化成 es5，并使用 eslint 规范代码：

  • babel-loader：加载 ES2015+ 代码，然后使用 Babel 转译为 ES5
  • @babel/preset-env：基础的ES语法分析包，各种转译规则的统一设定，目的是告诉loader要以什么规则来转化成对应的js版本
  • @babel/plugin-transform-runtime：解析 generator 等高级语法，但不包含 include 语法，include 语法需安装 @babel/polyfill。官方文档说上线需带上 @babel/runtime 这个补丁，该包还做了一些方法抽离的优化，如 class 语法的抽离（抽离出 classCallCheck 方法）
  • @babel/polyfill：解析更高级的语法，如 promise，include 等，在js文件中 require 引入即可
  • eslint-loader：校验 js 是否符合规范，可自行在 eslint 网站上配置下载

安装依赖

npm i @babel/core babel-loader @babel/preset-env @babel/plugin-transform-runtime -@babel/polyfill -D

npm i @babel/runtime eslint-loader eslint -S

webpack.config.js

{
    test: /\.js$/,
    use: {
      loader: "eslint-loader",
      options: {
        enforce: "pre", // 定义为前置loader，在normal的loader前执行
      },
    },
},
{
    test: /\.js$/, // enforce 默认为 normal 普通loader
    use: {
      loader: "babel-loader", 
      options: {
        presets: ["@babel/preset-env"], // 把es6转成es5
        plugins: ["@babel/plugin-transform-runtime"], //作用？
      },
    },
    include: path.resolve(__dirname, "src"),
    exclude: /node_modules/,
},

配置 source-map

源码映射配置 source-map 的值：

  • source-map 映射源码 会单独生成source-map文件 出错了会标识当前报错的行和列 大而全
  • eval-source-map 不会产生单独的文件，可显示行和列
  • cheap-module-source-map 不会标识列，会生成单独的映射文件
  • cheap-module-eval-source-map 不会产生文件 集成在打包后的文件中 不会产生列

webpack.config.js

  devtool: "eval-source-map",

引入js全局变量

有三种方式可以引入全局变量

expose-loader

可把变量暴露到 window 全局对象上，以 jquery 为例，先安装依赖

npm i jquery expose-loader -D

然后在 webpack.config.js 中配置 loader，把 $ 暴露到 window 全局对象上

module: {
  rules: [{
    test: require.resolve('jquery'),
    use: [{
      loader: 'expose-loader',
      options: '$'
    }]
  }]
}

除了上述方法外还可以在入口 js 文件中暴露

require("expose-loader?$!jquery");

providePlugin

可使用 webapck 内置插件 providePlugin 给每个模块中注入变量，还是以 jquery 为例

在 webapck.config.js 中配置

const webpack = require("webpack");
module.exports = {
    plugins: [        new webpack.ProvidePlugin({          $: 'jquery'        });    ]
}

然后在任意js模块中可以直接使用$调用，无需引入jquery包

// in a module
$('#item'); // <= works
// $ is automatically set to the exports of module "jquery"

通过 cdn 引入

还可以通过 cdn 链接的方式引入全局变量，但如果此时js文件中多写了 import $ from 'jquery'，就会把 jquery 也打包进去，可使用 external 防止将某些 import 的包(package)打包到 bundle 中

index.html

webpack.config.js

module.exports = {
  //...
  externals: {
    jquery: 'jQuery',
  },
};

这样就剥离了那些不需要改动的依赖模块，换句话，下面展示的代码还可以正常运行：

import $ from 'jquery';

$('.my-element').animate(/* ... */);

上面的例子。属性名称是 jquery，表示应该排除 import $ from 'jquery' 中的 jquery 模块。为了替换这个模块，jQuery 的值将被用来检索一个全局的 jQuery 变量。换句话说，当设置为一个字符串时，它将被视为全局的（定义在上面和下面）。

样式压缩和 js 压缩

production 模式下需压缩 css 可使用插件 css-minimizer-webpack-plugin，但使用了此插件压缩 css, 会导致 js 不压缩，所以需要安装 js 压缩插件 terser-webpack-plugin

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
    optimization: {
        minimize: true,
        minimizer: [
          new CssMinimizerPlugin(),
          // 压缩js
          new TerserPlugin({ test: /\.js(\?.*)?$/i }),
        ],
    },
}

图片处理

需要 loader 解析图片资源：

  • file-loader：将文件的import/require（）解析为url，并将文件发送到输出文件夹（dist文件夹），并返回（相对）URL
  • url-loader：像 file-loader 一样工作，但如果文件小于限制，可以返回 data URL，即把图片变成base64
  • html-loader：可以解析html标签引入的图片，可以通过查询参数 attrs,指定哪个标签属性组合(tag-attribute combination)应该被处理,默认值：attrs=img:src

安装依赖

npm i file-loader url-loader html-loader -D

配置 webpack.config.js

module: {
    rules: [
      {
        test: /\.jpg|png|jpeg$/,
        use: {
          loader: "file-loader", 
          options: {
            outputPath: "images/",
            name: "[name].[ext]", // 如果不写文件名，则会生成随机名字
            // publicPath: "http://cdn.xxx.com/images", // 可配置生产环境的cdn地址前缀
          },
        },
      },
      {
        test: /\.(html)$/,
        use: {
          loader: "html-loader",
          options: {
            esModule: false, 
          },
        },
      },
    ]
}
TIP： url-loader可以使用 options.limit 限制，小于多少k时使用base64转换，大于这个体积使用file-loader打包

html-loader 配置报错问题

html-loader 需关闭 es6 模块化，使用commonjs解析，否则会报错。原因主要是两个 loader 解析图片的方式不一样。

项目目录结构大致如下

├─.eslintrc.json
├─package-lock.json
├─package.json
├─postcss.config.js
├─webpack.config.js
├─src
|  ├─index.html
|  ├─js
|  | ├─index.js
|  | ├─server.js
|  | └test.js
|  ├─image
|  |   └logo.png
|  ├─css
|  |  ├─a.css
|  |  └index.css
├─dist

resolve 配置

resolve 常用的属性配置：

  • modules：告诉 webpack 解析模块时应该搜索的目录。绝对路径和相对路径都能使用，但是要知道它们之间有一点差异。

    • 使用绝对路径，将只在给定目录中搜索。使用相对路径，通过查看当前目录以及祖先路径。
    • 如果想要优先于某个目标目录搜索，则需把该目录放到目标目录前面，可详看官网例子
  • alias：设置别名，方便使用，下面的例子应用于 src 目录下的路径使用
  • mainFields：当从 npm 包中导入模块时（例如，import * as D3 from 'd3'），此选项将决定在 package.json 中使用哪个字段导入模块。根据 webpack 配置中指定的 target 不同，默认值也会有所不同。这里 browser 属性是最优先选择的，因为它是 mainFields 的第一项
  • extensions：尝试按顺序解析这些后缀名。当引入的文件不带后缀名，且有多个文件有相同的名字，但后缀名不同，webpack 会解析列在数组首位的后缀的文件 并跳过其余的后缀。
let path = require("path");

module.exports = {
    resolve: {
        modules: [path.resolve("node_modules")], 
        alias: {
          "@": path.resolve(__dirname, "src"),
        },
        mainFields: ["browser", "module", "main"], 
        extensions: [".js", ".json", ".vue"], 
    },
}

多页面配置

多页面顾名思义就是多个 html 页面，因此一般也会有多个 js 入口文件。

下面的配置中 entry 的 key 值对应的是 output 属性的 [name] 值，HtmlWebpackPlugin 中的属性 chunks 表示引入 [name] 对应的 js 代码文件，不指定 chunks 值将引入所有打包出来的 js 文件。

即本例的 [name] 分别为 home 和 other，即打包出来是 home.js 和 other.js，最终打包的效果是 home.html 引入的是 home.js，other.html 引入的是 other.js 文件

配置 webpack.config.js

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: {
      home: "./src/js/index.js",
      other: "./src/js/other.js",
  }, 
  output: {
    filename: "js/[name].js", 
    path: path.resolve("dist")
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "home.html",
      chunks: ['home']
    }),
    new HtmlWebpackPlugin({
      template: "./src/other.html",
      filename: "other.html",
      chunks: ['other']
    }),
  ],
}

webpack 小插件应用

clean-webpack-plugin

清除插件，可用于清除上一次的打包文件，清除目录为 output.path 的值

安装依赖

npm i clean-webpack-plugin -D

配置 webpack.config.js

const { CleanWebpackPlugin } = require("clean-webpack-plugin"); 

module.exports = {
    plugins: [
        new CleanWebpackPlugin(),
    ]
}

copy-webpack-plugin

拷贝插件，把某个文件夹导出到打包文件夹中，如文档文件夹（如 doc 文件夹）

安装依赖

npm i copy-webpack-plugin -D

配置 webpack.config.js

const CopyWebpackPlugin = require("copy-webpack-plugin"); // 拷贝文件

module.exports = {
    plugins: [
        new CopyWebpackPlugin({
          patterns: [
            {
              from: "./doc",
              to: "./doc", 
            },
          ],
        }),
    ]
}

插件配置属性

  • patterns

    • from： 源文件，相对于当前目录路径
    • to：目标文件，相对于output.path文件路径，会生成到 dist/doc 目录下

webpack.BannerPlugin

版权声明插件，webpack 内置插件，无需安装

配置 webpack.config.js

const webpack = require("webpack");

module.exports = {
    plugins: [        new webpack.BannerPlugin("copyright by Moon in 2022"),    ]
}

watch

可以监听文件变化，当它们修改后会重新编译，可以用在实时打包的场景下

配置 webpack.config.js

watch: true,
watchOptions: {
  poll: 1000, //每秒检查一次变动
  aggregateTimeout: 600, // 防抖
  ignored: /node_modules/,
},

配置属性

  • watchOptions 监听参数

    • poll： 每n毫秒检查一次变动
    • aggregateTimeout：防抖，当第一个文件更改，会在重新构建前增加延迟。这个选项允许 webpack 将这段时间内进行的任何其他更改都聚合到一次重新构建里。以毫秒为单位
    • ignored：对于某些系统，监听大量文件会导致大量的 CPU 或内存占用。可以使用正则排除像 node_modules 如此庞大的文件夹

配置后在命令窗口输入 npm run build 就可以进行监控并实时打包了，如图实时打包了一次

环境变量

通过 webpack 内置插件 DefinePlugin 定义 DEV 环境变量。

还可以把开发和生产模式不同的 webpack 配置抽离出来，即把 webpack.config.js 文件一分为三

  • 公共配置放在 webpack.config.base.js 文件
  • 开发模式配置放在 webpack.config.dev.js 文件，通过 webpack-merge 合并webpack.config.base.js 文件和 webpack.config.dev.js 文件的配置
  • 生产模式配置放在webpack.config.prod.js 文件 (和开发模式配置文件逻辑一致)

webpack.config.dev.js 文件完整代码如下：

let { merge } = require("webpack-merge");
let base = require("./webpack.config.base.js");
let HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");

module.exports = merge(base, {
  mode: "development",
  devtool: "eval-source-map",
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
    new webpack.DefinePlugin({
      ENV: JSON.stringify("dev"),
    }),
  ],
  devServer: {
    compress: true,
    client: { progress: true },
    port: 5000,

    // mock数据
    setupMiddlewares: (middlewares, devServer) => {
      if (!devServer) {
        throw new Error("webpack-dev-server is not defined");
      }

      middlewares.unshift({
        name: "fist-in-array",
        // `path` 是可选的
        path: "/user",
        middleware: (req, res) => {
          res.send({ name: "moon mock" });
        },
      });

      return middlewares;
    },
  },
});

使用环境变量后目录结构大致如下

├─.eslintrc.json
├─package-lock.json
├─package.json
├─postcss.config.js
├─webpack.config.base.js
├─webpack.config.dev.js
├─webpack.config.prod.js
├─src
|  ├─index.html
|  ├─js
|  | ├─index.js
|  | ├─server.js
|  | └test.js
|  ├─image
|  |   └logo.png
|  ├─css
|  |  ├─a.css
|  |  └index.css
├─doc
|  └notes.md
├─dist

更改配置文件后，打包命令也要做适当调整，打包时需要指定配置文件：

// 开发模式
webpack --config webpack.config.dev.js

// 生产模式
webpack --config webpack.config.prod.js

生产模式配置文件和公共配置文件源码后期上传

热更新

webpack 的热更新又称热替换（Hot Module Replacement），缩写为 HMR。这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。默认启用热更新，无需配置，它会自动应用 webpack.HotModuleReplacementPlugin，这是启用 HMR 所必需的。

优化

下面的配置代码都是在 webpack 配置文件中，不再赘述

缩小构建范围

include/exclude 选其一即可

module: {
    rules: [
        {
            test: /\.js$/,
            include: path.resolve(__dirname, "src"),
            // exclude: /node_modules/,
        },
    ]
}

module.noParse

由于webpack会通过入口文件解析 import, require 引用的包，还会去分析包的依赖，但有些包是没有依赖的，因此可以通过 noParse 不解析某个引用包中的依赖关系，来提高构建性能。适合没有依赖项的包，如 jquery

module: {
    noParse: /jquery/,
}

webpack.IgnorePlugin

webpack 内置插件 IgnorePlugin 可以阻止生成用于导入的模块，或要求调用与正则表达式或筛选函数匹配的模块。如 moment 包内引入了很多语言包，这些语言包都放在 locale 文件夹下，但大部分实际场景只会引用一个的语言包，因此打包时可忽略 moment 目录下的 locale 语言包

 new webpack.IgnorePlugin({
  resourceRegExp: /^\.\/locale$/,
  contextRegExp: /moment$/,
}),

忽略后再重新再js文件中引入某个语言包就能正常使用了

import "moment/locale/zh-cn";
moment.locale("zh-cn");

抽离公共代码

一般用在多页应用场景或者是单个 js 文件太大，请求需要很长时间，需要拆成几个js文件，优化请求速度，使用 optimization 的 splitChunks 属性来优化。

splitChunks.cacheGroups 缓存组可以继承和/或覆盖来自 splitChunks.* 的任何选项。但是 test、priority 和 reuseExistingChunk 只能在缓存组级别上进行配置。将它们设置为 false以禁用任何默认缓存组。

看下面配置之前先了解splitChunks的几个属性：

  • priority：抽离代码的优先级，值越高越先被抽离，防止某些模块在前面的模块抽离完了后面没被抽离到，在本例中是防止 vendor 模块被 common 模块抽离完了没被抽离到
  • name：每个模块（chunk）的文件名，不定义将是随机名字
  • test：匹配目录

  • chunks：选择哪些 chunk 进行优化

    • initial：从入口处开始提取代码，若有异步模块考虑后面两个值
    • async：异步模块
    • all：可以存在异步和非异步模块
  • minSize：生成 chunk 的最小体积，此处为方便测试设置为 0
  • minChunks：拆分前必须共享模块的最小 chunks 数，当前代码块引用多少次才被抽离，此处为方便设置设置为 1

本例中分割了 common 和 vendor 两个 chunk

optimization: {
    // 分割代码块
    splitChunks: {
      // 缓存组
      cacheGroups: {
        // 公共模块
        commons: {
          name: "common",
          chunks: "initial", 
          minSize: 0, 
          minChunks: 1, 
        },
        vendor: {
          name: "vendor",
          priority: 1, 
          test: /[\\/]node_modules[\\/]/,
          chunks: "all", //包括异步和非异步代码块
        },
      },
    },
  },

为方便大家理解，献上打包后的目录树结构

├─index.html
├─js
| ├─common.js
| ├─common.js.LICENSE.txt
| ├─main.js
| ├─main.js.LICENSE.txt
| ├─vendor.js
| └vendor.js.LICENSE.txt
├─images
|   └logo.png
├─doc
|  └notes.md
├─css
|  └main.css
这一块比较难理解，建议多试几次打包对比差异就懂了

懒加载

通过 es6 的 import() 语法实现懒加载，通过 jsonp 实现动态加载文件，import 函数返回的是 promise 对象。vue 懒加载，react 懒加载都是这样实现的。举个简单的栗子，某些 js 文件在按钮点击后再请求加载。

此处省略获取 button dom元素对象的代码

button.addEventListener('click', function(){
    import('./test.js').then(data => {
        console.log(data);
    })
})
除了以上的优化方法之外，还有dll预构建，多线程构建/压缩，利用缓存提升二次构建速度，动态 polyfill 等等，可根据实际情况自行选择优化方案，这里不一一赘述

webpack自带优化

tree-shaking

使用 import 语法在生产环境下没用到的代码不会被打包, 即 tree shaking, require 语法不支持tree-shaking

scope hosting

scope hosting(作用域提升)，举个栗子:

let a = 1
let b = 2
let c = 3
let d = a+b+c
console.log(d)

代码打包出来只有最后一句, webpack打包会自动省略一些可以简化的代码

手写简易less-loader

less-loader.js

在 /loaders/less-loader.js 目录文件中引入 less 插件

const less = require("less");

function loader(source) {
  let css = "";
  less.render(source, function (err, res) {
    css = res.css;
  });
}
module.exports = loader;

webpack.config.js

写入以下配置

resolveLoader: {
    alias: {
        "lessLoader": path.resolve(__dirname, "loaders", "less-loader"))
    }
},
module: {
    rules: [
        {
            test: /\.less/,
            use: ["style-loader", "lessLoader"]
        }
    ]
}

你可能感兴趣的:(webpack)

  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • 详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端vue.jsjavascript
    前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
  • react里的index.js是怎么跟index.html结合起来的? SherrinfordL
    image.pngcreate-react-app把webpack、babel等配置都封装到了依赖项目react-script中，所以你无法直观的看到这些配置。你可以在项目下运行npmruneject，被隐藏的配置文件就会暴露到项目根路径下。把请求转发到index.html原因是，你执行npmrunstart时，启动的webpack-dev-server，会加载react-script项目conf
  • 深入理解Webpack核心模块Tapable钩子[异步版] weixin_34413802 webpackjavascriptViewUI
    接上一篇文章深入理解Webpack核心模块WTApable钩子(同步版)tapable中三个注册方法1tap(同步)2tapAsync(cb)3tapPromise(注册的是Promise)tapable中对三个触发方法1call2callAsync3promise这一章节我们将分别实现异步的Async版本和Promise版本异步钩子AsyncParallelHookAsyncParallelHo
  • webpack 之 tapable 学习 weixin_34008784 webpackjavascriptViewUI
    前言webpack大家应该都耳熟能详了。个人感觉，webpack的本质就是让一堆的Loader和Plugin在webpack的可支配范围内，有序可控的执行，最终生成一堆可在浏览器中执行的code和一些状态信息。而这些Loader和Plugin，有用户自定义的，也有webpack自己内部定义的。Loader的运行机制，不是这篇文章讲述的内容，有需要的朋友，可以看下我之前的这篇文章：webpack之l
  • webapck由浅入深——（Tapable） weixin_33737134 webpackViewUI
    webpack系列文章webpack由浅入深——（webpack基础配置）webpack由浅入深——（webpack优化配置）webpack由浅入深——（tapable）webpack由浅入深——（webapck简易版）webpack由浅入深——（ast、loader和plugin）Tapable和webpackTapable是基于发布订阅模式实现的一个类库，提供了许多Hook类，可创建许多钩子。
  • webpack插件开发必会Tapable web老猴子 webpack前端javascript
    认识Tapable官方对tapable的定义是钩子，业界很多写tapable的觉得它是发布订阅模式，它确实很像发布订阅模式，但是不完全是，至于官方说的钩子，个人感觉在webpack内部可以称作钩子，因为是官方定义的，所以肯定是按照设计的想法来使用的，如果是你自己使用，操作不当可能就不是钩子了，毕竟只是一个工具，你拿扳手当锤子也没人说你什么，以上是个人见解，下面附上一些验证的思路。不喜欢论证，喜欢看
  • webpack的插件机制(Tapable) 若梦plus 前端工程化webpack前端
    webpack的插件机制(Tapable)在具体介绍webpack内置插件与钩子可视化工具之前，我们先来了解一下webpack中的插件机制。webpack实现插件机制的大体方式是：创建-webpack在其内部对象上创建各种钩子；注册-插件将自己的方法注册到对应钩子上，交给webpack；调用-webpack编译过程中，会适时地触发相应钩子，因此也就触发了插件的方法。Webpack本质上是一种事件流
  • 四、webpack4.0 - tapable Razas WEBPACK4webpack4.0
    一、tapable介绍webpack中插件的时候，需要用到tapable。新建一个项目WEBPACK-Tapable。初始化package.json:npminit-y安装：npminstalltapable--savetapable是一个包。二、tapable三、AsyncParralleHook四、AsyncSeriesHook五、AsyncSeriesWaterfall
  • tapable详解 风火一回 webpacktapablewebpack插件制作
    tapable详解tapable是webpack内部使用的一个流程管理工具，主要用来串联插件，完善事件流执行。1.安装tapableyarnaddtapable2.常用hooksimport{SyncHook,SyncBailHook,SyncWaterfallHook,SyncLoopHook,AsyncParallelHook,AsyncParallelBailHook,AsyncSeries
  • Tapable 信海利世 webpackwebpack前端
    一、Tapable是什么？Tapable是一个类似于Node.js的EventEmitter的库,主要是控制钩子函数的发布与订阅,控制着webpack的插件系统。Tapable库暴露了很多Hook（钩子）类，为插件提供挂载的钩子const{SyncHook,//同步钩子SyncBailHook,//同步熔断钩子即return一个非undefined的值，则不再继续执行后面的监听函数SyncWate
  • Webpack插件核心原理 gogo2027 webpack
    引言围绕Webpack打包流程中最核心的机制就是所谓的Plugin机制。所谓插件即是webpack生态中最关键的部分，它为社区用户提供了一种强有力的方式来直接触及webpack的编译过程(compilationprocess)。今天，我们来聊聊Webpack中必不可少的核心Plugin机制～Plugin本质上在Webpack编译阶段会为各个编译对象初始化不同的Hook，开发者可以在自己编写的Plu
  • webpack怎么配置单页面或者多页面项目？ 镜中的女孩-potato webpack前端node.js
    单页直接在entry中指定单页面的入口文件即可，对于多页面来说，如果页面之间有依赖关系可以考虑将entry的值改成一个数组，数组中的每一项是入口文件的地址，并且通过dependOn配置多个入口的依赖关系，一般的，我们也可以直接在entry中配置多个入口文件的键值对1、单页面举个例子=>你有这样一个项目架构├──config│├──webpack.config.js//webpack配置文件├──s
  • fetch-event-source 如何通过script全局引入 cuiyuchen111 javascript前端
    fetchEventSource源码中导出了两种类型的包cjs和esm。但是有个需求如何在原生是js中通过script标签引呢？需要加上type=module。今天介绍另一种方法下载源码文件：https://github.com/Azure/fetch-event-source.git安装:npminstall--save-devwebpackwebpack-clits-loadertypescr
  • 【Webpack 踩坑】CSS加载缓慢 ①条咸鱼 webpackcssrust
    问题：使用webpack5，单独index.scss在assets/css目录下，但是不管是production还是development环境下，都会出现dom加载完后再渲染样式本意是想要将样式单独打包到一个文件夹，还有压缩css于是用了mini-css-extract-plugin这个loader（前提要先安装）//webpack.config.jsconstMiniCssExtractPlug
  • 从零开始一步一步搭建 Vue3 + Webpack5 项目脚手架指南 Sam9029 Webpack前端webpack
    **‍‍若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！**由于文章有一万字左右的，故而内容中部分不免冗余，或许有写了些废话进去，但整体也无伤大雅**‍‍文章是初次实践总结,若有错误或某个内容有更优的解决方案，还望指正！**附录中有脚手架文件夹目录大纲（Vue3+Webpack5）脚手架项目源码:https://github.com/sam9029/s9_webpack_g
  • webpack原理、优势、基本功能和常见问题 伟大的人民艺术家 javascriptes6
    webpack是一个模块打包工具，用它可以管理项目中的模块依赖，并编译出所需的静态文件。打包原理：webpack打包原理是根据文件间的依赖关系对其进行静态分析，将这些模块按指定规则生成静态资源，当webpack处理程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，将所有这些模块打包成一个或多个bundle。webpack构建流程初始化参数—>开始编译---->确定入口---->
  • 前端技能树，面试复习第 29 天—— 简述 Babel 的原理 | Webpack 构建流程 | Webpack 热更新原理 | Git 常用命令 编程轨迹_ 前端面试复习笔记前端面试面经前端工程化WebpackBabel前端面试大厂面试题
    31b3479814f74acbb70b9f63f2e80012.gif"width=“100%”>⭐️本文首发自前端修罗场(点击加入社区，参与学习打卡，获取奖励)，是一个由资深开发者独立运行的专业技术社区，我专注Web技术、答疑解惑、面试辅导以及职业发展。。1.Babel的原理是什么?babel的转译过程也分为三个阶段，这三步具体是：解析、转换、生成解析Parse:将代码解析⽣成抽象语法树（AS
  • 前端开发深入了解webpack 史努比的大头 前端
    什么是webpackWebpack是一个现代JavaScript应用程序的模块打包工具。它主要用于将各种资源（如JavaScript、CSS、图片等）打包成一个或多个文件，以优化Web应用的加载性能。Webpack的核心功能包括：模块化：支持将代码拆分为模块，便于管理和重用。打包：将多个模块和资源打包成一个或多个文件，减少HTTP请求。加载器（Loaders）：处理不同类型的文件（如转换ES6到E
  • 【Webpack】了解Webpack Sam9029 Webpackwebpack前端node.js
    Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-前端领域博主‍若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！*文章若有错误或某个内容有更优的解决方案，还望指正！*Webpack了解webpack指南https://webpack.docschina.org/guides/webpack文档https://webpack.docschina.org/前
  • Webpack 概念速通：从入门到掌握构建工具的精髓 tabzzz 前端webpack前端
    Webpack基本概念这里我们先简单熟悉下Webpack的基本概念，我们在搭建项目的时候都会要用到的！这里我们分享的着重点是基本概念而不是具体配置项和使用方法依赖图(dependencygraph)模式(mode)入口(entry)输出(output)加载器(loader)插件(plugin)源映射(SourceMaps)开发服务器(devServer)依赖图（dependencygraph）依赖
  • 高级 - 总结 怕冷的火焰（~杰） nodejs和webpackwebpack
    高级总结:我们从4个角度对webpack和代码进行了优化:​1.提升开发体验使用SourceMap让开发或上线时代码报错能有更加准确的错误提示2.提升webpack打包构建速度使用HotModuleReplacement让开发时只重新编译打包更新变化了的代码,不变的代码使用缓存,从而使更新速度更快使用OneOf让资源文件一旦被某个loader处理了,就不会继续遍历了,打包速度更快使用Include
  • webpack 配置 weixin_44101835 webpack前端node.js
    webpack.base.jsconstpath=require('path');constHtmlWebpackPlugin=require('html-webpack-plugin');constMiniCssExtractPlugin=require('mini-css-extract-plugin');modules.export=function(isDev){return{//入口文件
  • 值得你学习的构建工具-Webpack5.0简化版--五大核心概念 双头雄狮 构建工具学习webpack
    一、Webpack是什么简单来说，webpack就是一个用于现代JavaScript应用程序的静态打包工具，打包过程：从入口文件开始，构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些所有模块打包，它们均为静态资源，用于展示你的内容。Webpack5运行于Node.jsv10.13.0+的版本。二、为什么使用Webpack在以前我们开发一个项目的时候，会出现很多.css、.js等类似的
  • Webpack五大核心概念 前路茫茫——何处无香 webpackwebpack
    一、Entry入口（Entry）指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。二、Output输出（Output）指示Webpack打包后的资源bundles输出到那里去，以及如何命名。三、LoaderLoader让Webpack能够取处理那些非JavaScript文件（Webpack自身子理解JavaScript）四、Plugins插件（Plugins）可以用于执行范围更广
  • webpack - 五大核心概念和基本配置（打包一个简单HTML页面） 怕冷的火焰（~杰） nodejs和webpackwebpacknode.js
    //五大核心概念1.entry（入口）指示Webpack从哪个文件开始打包2.output（输出）指示Webpack打包完的文件输出到哪里去，如何命名等3.loader（加载器）webpack本身只能处理js，json等资源，其他资源如图片需要借助loader，webpack才能解析4.plugin（插件）扩展Webpack的功能5.mode（模式）主要有两种模式：开发模式（development
  • Webpack和Vite的区别 南辞w 前端面试篇webpack前端node.js
    什么是webpack？webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependencygraph)，然后将你项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示你的内容。Webpack的打包构建流程Webpack会遍历你应用程序中的所有文件，并启动一个开发服务器，
  • CRACO 快速使用 小秀_heo React及其周边生态前端javascript
    GettingStarted|CRACOcraco是专门由于cra配置的重写，扩展配置cra（webpack）。安装依赖npmi-D@craco/craco根目录下创建craco.config.js和配置configure:my-app├──node_modules+├──craco.config.js└──package.jsoncraco.config.jsmodule.exports={de
  • 周末写点东西都是很困难的 焦糖大瓜子
    趁周末，也没有出去玩，回了趟家。看了一下VueCLI，也看了看阮大神写的webpack教程。webpack是一直想详细掌握的工具，需要系统学。学习一门技术，系统学习之后，那些重要和概念、设计的逻辑，也未必完全掌握，掌握的东西，也未必烂熟于心。终归要用于实际项目，反反复复，也就是常说的那个三境界：1.昨夜西风凋碧树，独上高楼，望断天涯路2.衣带渐宽终不悔,为伊消得人憔悴3.众里寻他千百度，蓦然回首，
  • WebAssembly studentliubo
    1、是什么WebAssembly或者wasm是一个可移植、体积小、加载快并且兼容Web的全新格式。其实w9y不是用来一行一行撸的代码，它是一个编译目标。什么是编译目标？当我们编写TypeScript的时候，Webpack最后打包生成的Js文件就是编译目标。2、和JS的关系WebAssembly是被设计成JavaScript的一个完善、补充，而不是一个替代品。WebAssembly将很多编程语言带到
  • [黑洞与暗粒子]没有光的世界 comsci
         无论是相对论还是其它现代物理学,都显然有个缺陷,那就是必须有光才能够计算      但是,我相信,在我们的世界和宇宙平面中,肯定存在没有光的世界....      那么,在没有光的世界,光子和其它粒子的规律无法被应用和考察,那么以光速为核心的 &nbs
  • jQuery Lazy Load 图片延迟加载 aijuans jquery
    基于 jQuery 的图片延迟加载插件，在用户滚动页面到图片之后才进行加载。 对于有较多的图片的网页，使用图片延迟加载，能有效的提高页面加载速度。 版本： jQuery v1.4.4+ jQuery Lazy Load v1.7.2 注意事项： 需要真正实现图片延迟加载，必须将真实图片地址写在 data-original 属性中。若 src
  • 使用Jodd的优点 Kai_Ge jodd
    1.  简化和统一 controller ，抛弃 extends SimpleFormController ，统一使用 implements Controller 的方式。 2.  简化 JSP 页面的 bind, 不需要一个字段一个字段的绑定。 3.  对 bean 没有任何要求，可以使用任意的 bean 做为 formBean。   使用方法简介
  • jpa Query转hibernate Query 120153216 Hibernate
    public List<Map> getMapList(String hql, Map map) { org.hibernate.Query jpaQuery = entityManager.createQuery(hql); if (null != map) { for (String parameter : map.keySet()) { jp
  • Django_Python3添加MySQL/MariaDB支持 2002wmj mariaDB
    现状 首先，[email protected] 中默认的引擎为 django.db.backends.mysql 。但是在Python3中如果这样写的话，会发现 django.db.backends.mysql 依赖 MySQLdb[5] ，而 MySQLdb 又不兼容 Python3 于是要找一种新的方式来继续使用MySQL。 MySQL官方的方案 首先据MySQL文档[3]说，自从MySQL
  • 在SQLSERVER中查找消耗IO最多的SQL 357029540 SQL Server
    返回做IO数目最多的50条语句以及它们的执行计划。 select top 50   (total_logical_reads/execution_count) as avg_logical_reads,  (total_logical_writes/execution_count) as avg_logical_writes,  (tot
  • spring UnChecked 异常 官方定义！ 7454103 spring
      如果你接触过spring的 事物管理！那么你必须明白 spring的 非捕获异常！ 即 unchecked 异常！ 因为 spring 默认这类异常事物自动回滚！！ public static boolean isCheckedException(Throwable ex) { return !(ex instanceof RuntimeExcep
  • mongoDB 入门指南、示例 adminjun javamongodb操作
    一、准备工作 1、 下载mongoDB 下载地址：http://www.mongodb.org/downloads 选择合适你的版本 相关文档：http://www.mongodb.org/display/DOCS/Tutorial 2、 安装mongoDB A、 不解压模式： 将下载下来的mongoDB-xxx.zip打开，找到bin目录，运行mongod.exe就可以启动服务，默
  • CUDA 5 Release Candidate Now Available aijuans CUDA
    The CUDA 5 Release Candidate is now available at http://developer.nvidia.com/<wbr></wbr>cuda/cuda-pre-production. Now applicable to a broader set of algorithms, CUDA 5 has advanced fe
  • Essential Studio for WinRT网格控件测评 Axiba JavaScripthtml5
    Essential Studio for WinRT界面控件包含了商业平板应用程序开发中所需的所有控件，如市场上运行速度最快的grid 和chart、地图、RDL报表查看器、丰富的文本查看器及图表等等。同时，该控件还包含了一组独特的库，用于从WinRT应用程序中生成Excel、Word以及PDF格式的文件。此文将对其另外一个强大的控件——网格控件进行专门的测评详述。 网格控件功能 1、
  • java 获取windows系统安装的证书或证书链 bewithme windows
          有时需要获取windows系统安装的证书或证书链，比如说你要通过证书来创建java的密钥库  。 有关证书链的解释可以查看此处 。   public static void main(String[] args) { SunMSCAPI providerMSCAPI = new SunMSCAPI(); S
  • NoSQL数据库之Redis数据库管理(set类型和zset类型) bijian1013 redis数据库NoSQL
    4.sets类型         Set是集合，它是string类型的无序集合。set是通过hash table实现的，添加、删除和查找的复杂度都是O(1)。对集合我们可以取并集、交集、差集。通过这些操作我们可以实现sns中的好友推荐和blog的tag功能。         sadd：向名称为key的set中添加元
  • 异常捕获何时用Exception，何时用Throwable bingyingao
    用Exception的情况 try {        //可能发生空指针、数组溢出等异常         } catch (Exception e) {          
  • 【Kafka四】Kakfa伪分布式安装 bit1129 kafka
    在http://bit1129.iteye.com/blog/2174791一文中，实现了单Kafka服务器的安装，在Kafka中，每个Kafka服务器称为一个broker。本文简单介绍下，在单机环境下Kafka的伪分布式安装和测试验证   1. 安装步骤   Kafka伪分布式安装的思路跟Zookeeper的伪分布式安装思路完全一样，不过比Zookeeper稍微简单些(不
  • Project Euler bookjovi haskell
    Project Euler是个数学问题求解网站，网站设计的很有意思，有很多problem，在未提交正确答案前不能查看problem的overview，也不能查看关于problem的discussion thread，只能看到现在problem已经被多少人解决了，人数越多往往代表问题越容易。     看看problem 1吧： Add all the natural num
  • Java-Collections Framework学习与总结-ArrayDeque BrokenDreams Collections
            表、栈和队列是三种基本的数据结构，前面总结的ArrayList和LinkedList可以作为任意一种数据结构来使用，当然由于实现方式的不同，操作的效率也会不同。         这篇要看一下java.util.ArrayDeque。从命名上看
  • 读《研磨设计模式》-代码笔记-装饰模式-Decorator bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.io.BufferedOutputStream; import java.io.DataOutputStream; import java.io.FileOutputStream; import java.io.Fi
  • Maven学习(一) chenyu19891124 Maven私服
        学习一门技术和工具总得花费一段时间，5月底6月初自己学习了一些工具，maven+Hudson+nexus的搭建，对于maven以前只是听说，顺便再自己的电脑上搭建了一个maven环境，但是完全不了解maven这一强大的构建工具，还有ant也是一个构建工具，但ant就没有maven那么的简单方便，其实简单点说maven是一个运用命令行就能完成构建，测试，打包，发布一系列功
  • [原创]JWFD工作流引擎设计----节点匹配搜索算法(用于初步解决条件异步汇聚问题) 补充 comsci 算法工作PHP搜索引擎嵌入式
    本文主要介绍在JWFD工作流引擎设计中遇到的一个实际问题的解决方案，请参考我的博文"带条件选择的并行汇聚路由问题"中图例A2描述的情况(http://comsci.iteye.com/blog/339756),我现在把我对图例A2的一个解决方案公布出来，请大家多指点 节点匹配搜索算法(用于解决标准对称流程图条件汇聚点运行控制参数的算法) 需要解决的问题：已知分支
  • Linux中用shell获取昨天、明天或多天前的日期 daizj linuxshell上几年昨天获取上几个月
    在Linux中可以通过date命令获取昨天、明天、上个月、下个月、上一年和下一年 # 获取昨天 date -d 'yesterday'  # 或 date -d 'last day' # 获取明天 date -d 'tomorrow'   # 或 date -d 'next day' # 获取上个月 date -d 'last month' #
  • 我所理解的云计算 dongwei_6688 云计算
          在刚开始接触到一个概念时，人们往往都会去探寻这个概念的含义，以达到对其有一个感性的认知，在Wikipedia上关于“云计算”是这么定义的，它说：        Cloud computing is a phrase used to describe a variety of computing co
  • YII CMenu配置 dcj3sjt126com yii
    Adding id and class names to CMenu We use the id and htmlOptions to accomplish this. Watch. //in your view $this->widget('zii.widgets.CMenu', array( 'id'=>'myMenu', 'items'=>$this-&g
  • 设计模式之静态代理与动态代理 come_for_dream 设计模式
    静态代理与动态代理        代理模式是java开发中用到的相对比较多的设计模式，其中的思想就是主业务和相关业务分离。所谓的代理设计就是指由一个代理主题来操作真实主题，真实主题执行具体的业务操作，而代理主题负责其他相关业务的处理。比如我们在进行删除操作的时候需要检验一下用户是否登陆，我们可以删除看成主业务，而把检验用户是否登陆看成其相关业务
  • 【转】理解Javascript 系列 gcc2ge JavaScript
    理解Javascript_13_执行模型详解 摘要: 在《理解Javascript_12_执行模型浅析》一文中,我们初步的了解了执行上下文与作用域的概念，那么这一篇将深入分析执行上下文的构建过程，了解执行上下文、函数对象、作用域三者之间的关系。函数执行环境简单的代码:当调用say方法时，第一步是创建其执行环境，在创建执行环境的过程中，会按照定义的先后顺序完成一系列操作:1.首先会创建一个
  • Subsets II hcx2013 set
    Given a collection of integers that might contain duplicates, nums, return all possible subsets. Note: Elements in a subset must be in non-descending order. The solution set must not conta
  • Spring4.1新特性——Spring缓存框架增强 jinnianshilongnian spring4
    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
  • shell嵌套expect执行命令 liyonghui160com
        一直都想把expect的操作写到bash脚本里,这样就不用我再写两个脚本来执行了,搞了一下午终于有点小成就,给大家看看吧.   系统:centos 5.x   1.先安装expect yum -y install expect   2.脚本内容: cat auto_svn.sh   #!/bin/bash
  • Linux实用命令整理 pda158 linux
    0. 基本命令 　　linux 基本命令整理 　 　1. 压缩 解压 　　tar -zcvf a.tar.gz a   #把a压缩成a.tar.gz 　　tar -zxvf a.tar.gz     #把a.tar.gz解压成a 　 　2. vim小结 　　2.1 vim替换 　　:m,ns/word_1/word_2/gc  
  • 独立开发人员通向成功的29个小贴士 shoothao 独立开发
    概述：本文收集了关于独立开发人员通向成功需要注意的一些东西,对于具体的每个贴士的注解有兴趣的朋友可以查看下面标注的原文地址。 明白你从事独立开发的原因和目的。 保持坚持制定计划的好习惯。 万事开头难，第一份订单是关键。 培养多元化业务技能。 提供卓越的服务和品质。 谨小慎微。 营销是必备技能。 学会组织，有条理的工作才是最有效率的。 “独立
  • JAVA中堆栈和内存分配原理 uule java
    1、栈、堆 1.寄存器：最快的存储区, 由编译器根据需求进行分配,我们在程序中无法控制.2. 栈：存放基本类型的变量数据和对象的引用，但对象本身不存放在栈中，而是存放在堆（new 出来的对象）或者常量池中（字符串常量对象存放在常量池中。）3. 堆：存放所有new出来的对象。4. 静态域：存放静态成员（static定义的）5. 常量池：存放字符串常量和基本类型常量（public static f
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他