随笔分类 - webpack
摘要：这里综上所述，多种文件处理打包 1.文件结构 2.代码 a.css #box1 { width: 100px; height: 100px; background-color: pink; display: flex; backface-visibility: hidden; } b.css #bo
阅读全文
摘要：这里使用 html-webpack-plugin 插件压缩 html 文件。 1.文件结构 2.代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack</title> </
阅读全文
摘要：压缩 JS 文件: 这里把 mode 设置为 生产模式，就会自动压缩 JS 代码。 1.文件结构 2.代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack</title>
阅读全文
摘要：这里使用 babel 处理 js 兼容性问题 1.文件结构 2.安装 babel core-js $ npm i babel@6.23.0 @babel/core@7.8.4 @babel/polyfill@7.8.3 babel-loader@8.0.6 @babel/preset-env -D
阅读全文
摘要：使用 eslint 对 js 进行语法检查 1.文件结构 2.安装 eslint 相关插件 $ npm i eslint@6.8.0 eslint-loader@3.0.3 eslint-plugin-import@2.20.1 eslint-config-airbnb-base@14.0.0 -D
阅读全文
摘要：使用 optimize-css-assets-webpack-plugin 插件压缩 CSS文件。 1.文件结构 2.安装 optimize-css-assets-webpack-plugin (根据自己环境安装合适的版本) $ npm i postcss-loader@3.0.0 postcss-
阅读全文
摘要：不同型号、版本的浏览器对CSS的支持程度不同，使用 postcss 插件对不同的浏览器做兼容。 1.文件结构 2.安装 postcss $ npm i postcss-loader@3.0.0 postcss-preset-env@6.7.0 -D 3. a.css #box1 { width: 1
阅读全文
摘要：打包时，使用 MiniCssExtractPlugin 插件，把提取 CSS 成单独文件。 1.文件结构： 2.安装 MiniCssExtractPlugin (根据自己的环境，安装合适的版本，这里用的是wenpack 4.x) $ npm i mini-css-extract-plugin@0.9
阅读全文
摘要：1.文件结构 2. iconfont.css @font-face {font-family: "iconfont"; src: url('../media/iconfont.eot?t=1581833245354'); /* IE9 */ src: url('../media/iconfont.e
阅读全文
摘要：配置devServer只需要在 webpack.config.js 中添加如下配置即可： // 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~） // 特点：只会在内存中编译打包，不会有任何输出 // 启动devServer指令为：npx webpack-d
阅读全文
摘要：1.素材准备: 首先准备一些矢量图图标，如，阿里矢量图等。(阿里矢量官网: https://www.iconfont.cn/) 随便找一些 icon 下载到本地 解压出来是这样的 2.文件结构 3. 安装 wenpack、webpack-cli $ npm init $ npm i webpack@
阅读全文
摘要：1.文件结构 2.安装 webpack、webpack-cli $ npm init $ npm i webpack@4.41.6 webpack-cli@3.3.11 -g //(全局) $ npm i webpack@4.41.6 webpack-cli@3.3.11 -D //(开发环境) 2
阅读全文
摘要：1.文件结构 2.安装 webpack、webpack-cli $ npm init $ npm i webpack@4.41.6 webpack-cli@3.3.11 -g //(全局) $ npm i webpack@4.41.6 webpack-cli@3.3.11 -D //(开发环境) 2
阅读全文
摘要：1.文件结构 2.安装 webpack、webpack-cli $ npm init$ npm i webpack@4.41.6 webpack-cli@3.3.11 -g //(全局) $ npm i webpack@4.41.6 webpack-cli@3.3.11 -D //(开发环境) 安装
阅读全文
摘要：1.文件结构 2.初始化，生成 package.json 文件 $ npm init 2.1安装 webpack 和 webpack-cli. (这里使用的是 webpack5 以下的版本) $ npm i webpack@4.41.6 webpack-cli@3.3.11 -g //(全局) $
阅读全文
摘要：为开发调试方便安装 webpack-dev-server. webpack-dev-server 可以让 webpack 监听项目源代码的变化，从而进行自动打包构建。 安装 webpack-dev-server npm install webpack-dev-server@3.11.2 -D 安装完
阅读全文
浙公网安备 33010602011771号