webpack
webpack
夏安
这个作者很懒,什么都没留下…
展开
-
「使用 webpack 5 从0到1搭建React + TypeScript 项目环境」3. 资源模块
「使用 webpack 5 从0到1搭建React + TypeScript 项目环境」3. 资源模块资源模块(asset module)是一种模块类型,它允许使用资源文件(字体,图标等)而无需配置额外 loader。在 webpack 5 之前,通常使用:raw-loader 将文件导入为字符串url-loader 将文件作为 data URI 内联到 bundle 中file-loader 将文件发送到输出目录资源模块类型(asset module type),通过添加 4 种新的模块类原创 2022-01-12 20:53:55 · 353 阅读 · 0 评论 -
「使用 webpack 5 从0到1搭建React + TypeScript 项目环境」2. 集成 css、less 与 sass
「使用 webpack 5 从0到1搭建React + TypeScript 项目环境」2. 集成 css、less 与 sass「使用 webpack 5 从0到1搭建React + TypeScript 项目环境」2. 集成 css、less 与 sass1. 配置 css1.1 开发环境1.2 生产环境2. 使用 CSS modules3. 配置 Less4. 配置 Sass「使用 webpack 5 从0到1搭建React + TypeScript 项目环境」2. 集成 css、less 与 sa原创 2022-01-11 13:30:45 · 783 阅读 · 0 评论 -
「使用 webpack 5 从0到1搭建React + TypeScript 项目环境」1. React 与 TypeScript 集成
「使用 webpack 5 从0到1搭建React + TypeScript 项目环境」1. React 与 TypeScript 集成本篇文章会带大家使用 webpack 5集成 React 与TypeScript,同时为了提高我们的代码质量,我们会在构建中添加类型检查和代码规范校验。创建项目结构首先我们新建一个项目,结构如下:由于很多配置在生产环境和开发环境中存在不一致的情况,比如开发环境没有必要设置缓存,生产环境还需要设置公共路径等等。所以这里我们分开发环境和生产环境,让打包更灵活。w原创 2021-12-22 20:09:50 · 1113 阅读 · 5 评论 -
一文了解source-map
一文了解source-map一文了解source-map背景举例source-mapevaleval-source-mapinline-source-mapcheap-source-mapcheap-module-source-map总结开发环境生产环境一文了解source-map背景作为一个开发工程师——无论是什么开发,要求开发环境最不可少的一点功能就是——debug功能。 当我们通过webpack 将我们的源码打包成了 bundle.js 。 试想:实际上客户端(浏览器)读取的是打包后的bundl原创 2021-12-02 14:11:21 · 1272 阅读 · 0 评论 -
webpack 之开发环境优化 source-map
webpack 之开发环境优化 source-map/** * source-map:一种 提供源代码到构建后代码映射 技术 (如果构建后代码出错了,通过映射可以追踪源代码错误) * [inline-|hidden- |eval-][nosources-][cheap-[module-]]source-map source-map:外部 错误代码准确信息 和 源代码的错误位置 inline-source-map:内联 只生原创 2021-01-29 11:09:33 · 380 阅读 · 0 评论 -
webpack 之开发环境优化 HMR
webpack 之开发环境优化 HMR// webpack.config.js/** * HMR hot module replacement 热模块替换 / 模块热替换 * 作用:一个模块发生变化,只会重新打包这一个模块(而不是打包所有模块) * 极大提升构建速度 * * * 样式文件:可以使用 HMR 功能:因为 style-loader 内部实现了 * js 文件:默认不能使用 HMR 功能 --> 需要修改js代码,添加支持HM原创 2021-01-29 10:53:20 · 114 阅读 · 1 评论 -
webpack 之 一个简单的基本生产环境配置
webpack 之 一个简单的基本生产环境配置// 用来拼接绝对路径的方法const {resolve} = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const MiniCssExtractPlugin = require('mini-css-extract-plugin')const OptimizeCssAssetsWebpackPlugin = require('optimize-css-a原创 2021-01-26 16:07:19 · 81 阅读 · 0 评论 -
webpack 之js兼容性处理
webpack 之js兼容性处理// 用来拼接绝对路径的方法const {resolve} = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { // webpack 配置 // 入口起点 entry : './src/index.js', // 输出 output : { // 输出文件名 f原创 2021-01-23 19:53:37 · 215 阅读 · 0 评论 -
webpack 之 js语法检查eslint
webpack 之 js语法检查eslint// 用来拼接绝对路径的方法const {resolve} = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { // webpack 配置 // 入口起点 entry : './src/index.js', // 输出 output : { // 输出文件名原创 2021-01-23 14:08:52 · 220 阅读 · 0 评论 -
webpack 提取css成单独文件
webpack 提取css成单独文件// 用来拼接绝对路径的方法const {resolve} = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const MiniCssExtractPlugin = require('mini-css-extract-plugin')module.exports = { // webpack 配置 // 入口起点 entry : './原创 2021-01-23 11:32:48 · 260 阅读 · 0 评论 -
输入指令npx webpack-dev-server报错:Error: Cannot find module ‘webpack-cli/bin/config-yargs‘的解决方法
输入指令npx webpack-dev-server报错:Error: Cannot find module ‘webpack-cli/bin/config-yargs‘的解决方法输入指令:npx webpack-dev-server显示如下报错信息:C:\Users\ASUS\Desktop\JavaScript 代码\webpack实验>npx webpack-dev-serverinternal/modules/cjs/loader.js:983 throw err; ^Err原创 2021-01-21 10:51:20 · 791 阅读 · 0 评论 -
webpack 配置devServer 服务器
webpack 配置devServer 服务器/** * loader: 1. 下载 2. 使用(配置) * plugins:1. 下载 2. 引入 3.使用 */// 用来拼接绝对路径的方法const {resolve} = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { // webpack 配置 // 入口起点 entry原创 2021-01-21 10:46:14 · 365 阅读 · 0 评论 -
webpack 打包图片资源
webpack 打包图片资源/** * loader: 1. 下载 2. 使用(配置) * plugins:1. 下载 2. 引入 3.使用 */// 用来拼接绝对路径的方法const {resolve} = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { // webpack 配置 // 入口起点 entry : './src/原创 2021-01-20 21:09:24 · 111 阅读 · 0 评论 -
webpack 打包html文件
webpack 打包html文件webpack.config.js配置文件内容为:/** * loader: 1. 下载 2. 使用(配置) * plugins:1. 下载 2. 引入 3.使用 */// 用来拼接绝对路径的方法const {resolve} = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { // webpack 配置原创 2021-01-20 19:23:10 · 288 阅读 · 0 评论 -
webpack 打包样式资源
webpack 打包样式资源webpack.config.js配置文件内容为:// 用来拼接绝对路径的方法const {resolve} = require('path')module.exports = { // webpack 配置 // 入口起点 entry : './src/index.js', // 输出 output : { // 输出文件名 filename : 'built.js', //原创 2021-01-20 16:04:28 · 85 阅读 · 0 评论