Powered by md-Blog  文 - 篇  访客 -

  • 【文件资源】url-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-03-24 16:26:24   2020-03-18 11:22:25
    分类:Webpack / 浏览:015845017455005
  • 【样式加载器】css-loader

    安装yarn add css-loader style-loader -D配置webpack.dev.jsmodule: { rules:[{ test: /.css$/, // test 匹配 use: ['style-loader', 'css-loader'], // 从右向左加载 include: /src/, // 只转换src目录下 }] }../../md/Webpack/

    2020-03-24 16:26:24   2020-03-18 11:22:26
    分类:Webpack / 浏览:015845017462517
  • 【样式提取】mini-css-extract-plugin

    对比与 extract-text-webpack-plugin 相比:异步加载无重复编译用法简单支持css分割安装yarn add mini-css-extract-plugin -D配置webpack.prod.jsconst MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { module: { rules: [ { test: /.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader' ], include: /src/

    2020-03-24 16:26:24   2020-03-20 21:40:15
    分类:Webpack / 浏览:015847116153835
  • 【热更新】webpack-dev-server 及指定浏览器打开

    简称WDS热更新配置成功后,浏览器 console 输出:[HMR] Waiting for update signal from WDS... [WDS] Hot Module Replacement enabled. [WDS] Live Reloading enabled.优点不刷新浏览器不输出文件,而是放在内存中安装yarn add webpack-dev-server -D修改 package.json,添加如下脚本,此处为两份 webpack 配置,一个生产环境,一个开发环境。"scripts": { &q

    2020-03-24 16:26:24   2020-03-18 11:22:26
    分类:Webpack / 浏览:015845017466742
  • 【环境安装】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-03-24 16:26:24   2020-03-18 11:22:26
    分类:Webpack / 浏览:015845017465964
  • 【自动清理】clean-webpack-plugin

    安装yarn add clean-webpack-plugin -D配置webpack.prod.jsconst { CleanWebpackPlugin } = require("clean-webpack-plugin"); module.exports = { plugins: [ new CleanWebpackPlugin() ], }../../md/Webpack/

    2020-03-24 16:26:24   2020-03-18 11:22:26
    分类:Webpack / 浏览:015845017468649
  • 【运行脚本命令】run dev、run build

    配置修改 package.json,添加如下脚本"scripts": { "build": "webpack", "dev": "webpack-dev-server" },运行yarn run devyarn run build../../md/Webpack/

    2020-03-24 16:26:24   2020-03-18 11:22:26
    分类:Webpack / 浏览:015845017466992
  • 【配置文件】webpack.config.js

    可以通过 webpack --config 指定配置文件默认: webpack.config.js如需生产开发环境,请点击了解:SoEasy-Webpack4.0-Templete,如果对您有所帮助,别忘了给个 Star,谢谢!以下配置仅为格式参考,不适用于开发。module.exports = { entry: './src/index.js', // 入口文件 output: './dist/main.js', // 输出文件 mode: 'production', // 模式 modu

    2020-03-24 16:26:24   2020-03-18 11:22:26
    分类:Webpack / 浏览:015845017464453
  • 春明


     
    百度站内搜索


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