王小匠 | Blog

（五）打包CSS、LESS、SASS

CSS 打包CSS，必须用到 style-loader 和 css-loader。安装命令行：npm install --save-dev style-loader css-loader。添加一下内容： 12345678910111213141516171819202122232425module.exports = { module: { rules: [&#......

Posted by ARTROY on 2019-08-05

Webpack

（六）打包HTML

HtmlWebpackPlugin 会在打包结束后，自动化生成一个html文件，并把打包生成的js文件自动引入到这个html文件中。安装 npm install --save-dev html-webpack-plugin 使用修改webpack.config.js： 1234567891011121314151617var HtmlWebpackPlugin = require('......

Posted by ARTROY on 2019-08-05

Webpack

（四）url-loader 打包图片

url-loader 文件和 file-loader类似， url-loader可以把图片以 base64 格式打包进 js 文件中，一版小于 1-2kb 大小的文件可以直接打包，减少请求，如果过大，打包进 js 文件会加大该文件得大小，导致加载时间过长。设置url-loader 文件也和 file-loader类似： 1234567891011121314151617module.ex......

Posted by ARTROY on 2019-08-05

Webpack

（三）File-loader 打包图片

一、安装安装打包图片loader，npm install --save-dev file-loader 二、修改 webpack.config.js 文件： 12345678910111213141516171819202122const path = require('path');module.exports = { mode: 'production', entr......

Posted by ARTROY on 2019-08-04

Webpack

（二）Webpack 配置文件

Webpack 默认配置文件 webpack.config.js，不创建会使用默认的。一、重置webpack.config.js 在根目录下创建 webpack.config.js 123456789101112131415161718192021const path = require('path');module.exports = { mode: 'producti......

Posted by ARTROY on 2019-08-03

Webpack

（一）Webpack 初识

Posted by ARTROY on 2019-08-02

Webpack

【Webpack】Webpack之打包html,css,js,img（一）

项目背景：已完成了项目，在原来的HTML，JS…上构建项目。原项目：步骤1：安装 Webpack 使用 npm 安装 webpack 模块，在 webpack 3 中，webpack本身和 webpack-cli 都是在同一个包中，但在第4版中，两者已经分开管理，故需要全局安装 webpack 和 webpack-cli 。 123// 全局安装npm install -g webp......

Posted by ARTROY on 2019-07-18

Webpack

【JavaScript】匹配elective后的数字输出

一、问题 Url 有以下三种情况： 123var url_1 = 'https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=&local_province_id=33';var url_2 = 'https://www.xx.cn/api?keyword=&level1=&......

Posted by ARTROY on 2019-07-15

JavaScript 面试

【随笔】JXS是什么

JXS是什么？ JSX 是 JS 的语法扩展，使用 JSX 在 React 是替代常规的 JS ，可以用js的方式去描绘试图。 JXS的优点执行更快：它对编译JS代码进行了优化，单纯去写createElement会更慢，不人性化。类型安全：JSX会在编译过程中被规范的整理，做一系列的严谨的转换和类型检测，在编译过程中就能发现错误。开发效率：JSX使用编译模板更加简洁快速。 JXS的......

Posted by ARTROY on 2019-07-08

面试随笔 React

【随笔】引入.babelrc文件报错

Create React App 创建了一个项目，添加了 .babelrc 文件报以下错误：出错原因：根目录下的 .babelrc 和 package.json 中的 babel 配置存在了两份。 12345678910111213// package.json"babel": { "presets": [ "react-app" ], "pl......

Posted by ARTROY on 2019-07-07

随笔 React

ARTROY

（五）打包CSS、LESS、SASS

（六）打包HTML

（四）url-loader 打包图片

（三）File-loader 打包图片

（二）Webpack 配置文件

（一）Webpack 初识

【Webpack】Webpack之打包html,css,js,img（一）

【JavaScript】匹配elective后的数字输出

【随笔】JXS是什么

【随笔】引入.babelrc文件报错

标签

关于

最新帖子

参与社区

归档