随笔分类 - webpack
1
webpack基础知识
摘要：1 简介 loader 用于对模块的源代码进行转换 loader 可以使你在 import 或"加载"模块时预处理文件 因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法 loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaS
阅读全文
摘要：1 webpack之配置css样式资源 1.1 下载安装项目依赖 # style-loader：创建style标签，将js中的样式资源插入进行，添加到head中生效 # css-loader：将css文件变成commonjs模块加载js中，里面内容是样式字符串 npm i style-loader
阅读全文
摘要：1 概述 1.1 什么是 webpack 1、 webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在webpack看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应
阅读全文
摘要：1 环境准备 1.1 安装git(可选) Git官网下载地址 Git安装步骤 1.2 安装node Node官网下载地址 安装完成后，查看node版本 node -v npm是随同node一起安装的包管理工具，安装完node以后，就可以直接使用了 安装淘宝镜像：使用cnpm 命令(可选) npm i
阅读全文
摘要：# path 1. 所有文件的输出文件的目标路径 2. 必须是绝对路径 3. 打包后项目文件在硬盘中的存储位置 4. HtmlWebpackPlugin生成的html文件，都会存放在以path为基础的目录下 # publicPath 1. 输出解析文件的目录，指定资源文件引用的目录 ，打包后浏览器访
阅读全文
摘要：# 介绍 1. 始化项目 cnpm init -y ，会自动生成一个package.json文件， 2. package.json文件主要是显示项目的名称、版本、作者、协议等信息 3. 在package.json中scripts中配置相关参数，可以使运行简化 # 开发模式 "dev": "webpa
阅读全文
摘要：1. 安装依赖： cnpm install --save-dev url-loader image-webpack-loader html-loader 2. webpack.config.js规则的配置 /* * url-loader：主要是图片处理和Base64编码（base64就是一串加密的字
阅读全文
摘要：1. 安装：主要是用来压缩css文件 cnpm install --save-dev optimize-css-assets-webpack-plugin cssnano 2. webpack.config.js配置 const optimizeCssAssetsWebpackPlugin=requ
阅读全文
摘要：# 1. 安装依赖 babel-loader: 负责 es6 语法转化 babel-preset-env: 包含 es6、7 等版本的语法转化规则 babel-polyfill: es6 内置方法和函数转化垫片 babel-plugin-transform-runtime: 避免 polyfill
阅读全文
摘要：# 介绍 1. webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js 文件、css 文件等）都看成模块，通过 loader（加载器）和 plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源 2. Webpack 是一个前端资源加载/打包工具。它
阅读全文
摘要：1. 安装 cnpm install --save jquery expose-loader 2. 在webpack.config.js中配置 Jquery库是使用的webpack的一个插件ProvidePlugin，因此不需通过import/require引入此模块，可以直接配置插件Provide
阅读全文
摘要：1. 安装： //loader加载器加载css和sass模块 cnpm install style-loader css-loader node-sass sass-loader --save-dev //loader加载器加载css和less模块 cnpm install style-loader
阅读全文
摘要：1. 在webpack中加载css需要先安装style-loader 和 css-loader cnpm install --save-dev style-loader css-loader 2. 在webpack中使用postcss自动添加厂商前缀； cnpm install postcss-lo
阅读全文
摘要：1. 安装：打包编译时，可以删除一些html中没有使用的选择器，如果html页面中没有class=a class="b"的元素，.a{}.b{}样式不会加载 cnpm install --save-dev purifycss-webpack purify-css glob 2. webpack.co
阅读全文
摘要：1. 安装：主要是用来清除重复文件，生成最新的的插件 就是说在编译文件的时候，先把 build或dist (就是放生产环境用的文件) 目录里的文件先清除干净，再生成新的带有hash值的文件 cnpm install clean-webpack-plugin --save-dev 2. webpack
阅读全文
摘要：# html-webpack-plugin插件 1. 动态生成html文件并自动引入js文件 2. 静态文件无需加载js或css文件，通过设置入口文件可以将js文件自动添加进去，而相关的css文件在js中导入 3. 同时修改生成的js文件命名规则，利用hash码命名js文件 4. 没有改动时可以让浏
阅读全文
摘要：1. 安装webpack-dev-server（在指定目录下），一定要先安装完毕webpack webpack-cli之后在安装webpack-dev-server 一个基于expressjs的开发服务器，提供实时刷新浏览器页面的功能 模块热替换：（相当于ajax局部刷新功能）webpack --w
阅读全文
摘要：output: { filename: './js/[name].[hash:8].js', /* * filename:在使用webpack-dev-server模式时，如果要使用hash，是不可以使用chunkhash的，建议直接使用hash，必须是相对路径 * path：输出路径必须是绝对路径
阅读全文
摘要：1. 一般是采用对象语法： entry: { index: './src/default/js/index.js' }, https://webpack.css88.com/concepts/entry-points.html
阅读全文
摘要：准备工作： 1. 安装git： git下载地址：https://git-scm.com/downloads git安装步骤：https://blog.csdn.net/litao_huang/article/details/80838118 2. 安装node 2.1 node下载地址：http:/
阅读全文
1
浙公网安备 33010602011771号