Powered by md-Blog  文 - 篇  访客 -

  • 【vue】vue-loader 及单文件组件开发实例

    参考地址:https://vue-loader.vuejs.org/zh/说明vue-loader 用于处理 Vue 的组件。vue-template-compiler 用于处理组件中 <template> 块为字符串。安装yarn add vueyarn add vue-loader vue-template-compiler -D单文件组件开发实例index.html<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport&qu

    2020-11-01 17:25:33   2020-03-18 15:52:28
    分类:Webpack / 浏览:015845179484158
  • 【why】为何需要类似 Webpack 的构建工具?

    转换 ES6 语法转换 JSX 扩展语法CSS 前缀补全 / 预处理压缩混淆图片压缩增加哈希值,解决部署客户端的缓存问题../../md/Webpack/

    2020-11-01 17:25:33   2020-03-18 11:22:25
    分类:Webpack / 浏览:015845017456035
  • 【图片问题】Webpack打包图片img后src为“[object Module]”问题

    问题使用 url-loader / file-loader 打包图片后图片路径变为:[object Module]原因新版本的 file-loader 中 esModule 默认为 true,我们在配置文件中修改为 false 即可。解决options 添加:esModule: false 选项rules: [{ test: /.(png|jpg|gif)$/, use: { loader: 'url-loader', options: { esModule: false, limit: 1024 * 10, name:

    2020-11-01 17:25:33   2020-07-18 11:57:31
    分类:Webpack / 浏览:015950446515565
  • 【文件资源】file-loader

    推荐只使用 url-loader 即可定义file-loader 返回的是图片的 url。url-loader 可以通过 limit 属性对图片分情况处理,当图片小于 limit(单位:byte)大小时转base64,大于 limit 时调用 file-loader 对图片进行处理。区别相同点:都是在 Webpack 中处理图片、字体图标等文件。关系:url-loader 封装了 file-loader,但url-loader 并不依赖于 file-l

    2020-11-01 17:25:33   2020-03-18 11:22:25
    分类:Webpack / 浏览:015845017453441
  • 【环境安装】node.js 环境和 NPM 包管理工具的安装

    安装 NVMnvm是让你在同一台机器上安装和切换不同版本的node的工具github:https://github.com/nvm-sh/nvm提供两种方式的安装curl 安装:curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bashwget 安装:wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash命令:nvm ls-remote:列出所有可以安装的node版本号 nvm install v10.

    2020-11-01 17:25:33   2020-03-18 11:22:26
    分类:Webpack / 浏览:015845017465964
  • 【自动加载模块】ProvidePlugin

    自动加载模块插件,不用每次都在文件头 import xxx from 'xxx'config.common.jsplugins:[ new webpack.ProvidePlugin({ $: 'jquery', // 自动加载jQuery _last: ['lodash', 'last'] // 加载lodash的last方法 }) ]../../md/Webpack/

    2020-11-01 17:25:33   2020-03-25 16:36:38
    分类:Webpack / 浏览:015851253986805
  • 【配置分离】webpack-merge

    Why?随着我们业务逻辑的增多,图片、字体、css、ES6以及CSS预处理器和后处理器逐渐的加入到我们的项目中来,进而导致配置文件的增多,使得配置文件书写起来比较繁琐,更严重者(书写特定文件的位置会出现错误)。更由于项目中不同的生产环境和开发环境的配置,使得配置文件变得更加糟糕。使用单个的配置文

    2020-11-01 17:25:33   2020-03-24 16:26:24
    分类:Webpack / 浏览:015850383842006
  • 【HTML加载】html-loader

    安装yarn add html-loader -D配置webpack.config.jsmodule:{ rules:[ { test: /.html$/, use: 'html-loader' } ] }测试header.html<header> <h1>My Header</h1> </header>index.jsimport header from './header.html'; document.write(header);../../md/Webpack/

    2020-11-01 17:25:32   2020-03-18 11:22:25
    分类:Webpack / 浏览:015845017454225
  • 【jQuery】for SoEasy-Webpack4.0-Templete

    基于【点击了解】SoEasy-Webpack4.0-Templete。如果您该模板对您有所帮助,请别忘了点个 Star,谢谢!默认使用 yarn 构建,当然您也可以选择 npm、cnpm。安装jQuery 的安装yarn add jquery使用main.jsimport $ from 'jquery';测试main.jsconsole.log($);../../md/Webpack/

    2020-11-01 17:25:32   2020-03-24 16:51:21
    分类:Webpack / 浏览:015850398817778
  • 【yarn】简单构建一个 Webpack 项目

    本教程只适用于练习及理解,不推荐在生产开发环境中。如需生产开发环境,请点击了解:SoEasy-Webpack4.0-Templete,如果对您有所帮助,别忘了给个 Star,谢谢!1、项目初始化yarn init -y2、安装 Webpackwebpack 核心模块webpack-cli 命令行工具yarn add webpack webpack-cli -D3、验证版本号npx webpack -vnpx webpack-cli -v4、新建文件/src/index.jsimpor

    2020-11-01 17:25:32   2020-03-18 11:22:25
    分类:Webpack / 浏览:015845017452204
  • 春明


     
    百度站内搜索


  • 晋ICP备18012953号-1
  • 百度统计