常用配置说明entry可以接受字符串，数组，对象等多种格式项目打包入口文件，可以是绝对路径也可以是相对路径webpack 打包默认入口文件是 ./src/index.js 约定，默认输出是 项目根目录下 /dist/main.jsoutput 打包后的内容输出相关配置，path打包后文件路径, 只能使用绝对路径常用loader相关理解默认情况下，webpack 值支持.js,.json文件，通过
转载
2021-01-29 10:59:50
508阅读
2评论
基本安装
首先创建一个文件夹webpack-demo(名字自取)，然后在本地安装webpack，接着安装webpack-cli
npm init -y
npm install webpack webpack-cli --save-dev
然后在主文件夹下新建一个src和public子文件夹和webpack.config.js配置文件
在子文件夹public中新建index.html(此文件为入
原创
2023-08-28 20:01:35
818阅读
安装npminstall--save-devwebpack@4.30.0webpack-cli@3.3.2更新package.json脚本"scripts":{"build":"webpack--configwebpack.config.js"}更新目录结构webpack-demo|-package.json+|-webpack.config.js+|-index.html+|-/src+|-in
原创
2021-02-16 23:25:28
536阅读
1、首先创建一个文件夹demo02，并打开cmd 进入到demo02 文件夹中项目初始化：cnpm init -
原创
2022-07-08 06:23:48
56阅读
一、环境准备(java,maven,nodejs,webpack)[root@13 ~]# yum install -y curl-devel expat-devel gettext-devel openssl-devel zlib-devel[root@13 ~]# tar zxvf jdk-8u91-linux-x64.tar.gz -C /opt/[root@13 ~]# tar
原创
2019-02-26 15:16:39
2327阅读
使用 antd安装yarn add antd复制代码配置仍然需要使用babel-plugin-import，不过在v4版本的介绍文档中没有该部分说明了，需要到v3版本找 —— antd@v3 - 高级配置yarn add babel-plugin-import -D复制代码只安装babel-plugin-import是不够的，还需要安装less和less-loaderyarn add less l
转载
2021-01-19 22:02:34
352阅读
2评论
安装 TSyarn add typescript -D复制代码安装@types的类型声明包。当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能，声明文件是以index.d.ts的一个文件，一般放在项目的根目录中，或者可以通过package.json中的typings/types属性来指定项目中声明文件的位置。获取一个库类型声明文件有两种方式：一种是该库包含了自己的声
转载
2021-01-19 22:03:00
402阅读
2评论
管理模块module在 webpack 中，每个文件都是一个模块，除了 webpack 认识的 JS 和 JSON 文件，CSS，图片等都是模块，模块之间通过不同方式的语法会产生依赖关系，例如：ES6+的import；CommonJS 的require；AMD 的define和require；css/sass/less 文件中的@import，url(...)；html 文件中可替换元素的src属
转载
2021-01-19 22:11:00
1093阅读
2评论
之前通过一些 webpack 的简单配置，项目可以使用 React 来编写基本组件了，但是每次编写组件，都需要重新执行webpack命令打包，然后再手动在浏览器中打开页面才能看到开发结果，这是十分影响开发效率的，我们要的效果yarn start启动项目运行，在开发过程中使用ctrl+s保存文件，然后页面能自动更新，为此需要配置 HMR 和 webpack-dev-server。开发模式模式（Mod
转载
2021-01-19 22:31:20
605阅读
2评论
一、安装babel相关 1，安装依赖 2，新建.babelrc 3，相关webpack.conf.js 片段 二、安装静态资源全家桶（img/svg、字体图标、css/scss/style/postcss/autoprefixer） 1，安装依赖 2，相关webpack.conf.js 片段
转载
2018-02-10 14:15:00
76阅读
2评论
resolvewebpack 的底层配置项resolve主要和模块解析的路径相关，常见的例如mainFiles ，extensions等resolve.alias配置模块依赖别名，常见的@解析到src文件夹，path.resolve本身是用来构造绝对路径的，所以@总能解析到src目录的路径module.exports = { resolve: {alias: { '@': path.r
转载
2021-01-19 22:03:21
506阅读
2评论
chunk 和 bundleConcepts - Bundle vs Chunk经常让人摸不着头脑的是 chunk 和 bundle 这两个概念。chunk，翻译过来就是大块，也就是代码块；而 bundle 则是束，包的意思。从 webpack 给出的术语表中是这么解释的：Chunk: This webpack-specific term is used internally to manage
转载
2021-01-19 22:07:28
510阅读
2评论
上篇文章简单介绍了以下webpack内部WDS的使用，这节讨论一下WDS内部proxy的配置方式。devServerwebpack-devServer，一般简称WDS，是 webpack 内置的用于开发环境的服务器配置。webpack本身提供三种方式用于开发环境修改代码以后自动编译，以提高开发效率：观察模式WDSwebpack-dev-middleware总体来说，WDS 配置最容易，并且提供 H
转载
2021-01-19 22:09:40
508阅读
2评论
配置 webpackwebpack 介绍根据webpack官网的解释来说，webpack是一个现代 JS 应用的 bundler，翻译过来就是打包器。webpack会根据模块之间的依赖最终合并模块形成一个或者多个 bundles。安装 webpack 脚手架，以及命令行工具yarn init
yarn global add webpack webpack-cli复制代码修改项目目录添加 dist
转载
2021-01-19 22:33:19
729阅读
2评论
webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过loader的转换，任何形式的资源都可以视作模块，比如CommonJs模块、AMD模块、ES6模块、CSS、图片、JSON、Coffeescript、LESS等，当然，要使用webpack当然得先搭建一
转载
2018-12-07 10:57:48
1665阅读
点赞
额、备份一下总是好的 配置webpack.config.js 配置.babelrc 配置package.json，加入scripts
转载
2017-10-22 19:27:00
66阅读
2评论
能用babel编译es2015 、 能热编译、能加载静态资源（js/css/font/image）。是一个很通用的开发环境，虽然不智能。但很好扩展 npm 安装列表： webpack.config.js package.json 目录结构： 快速启动：npm run dev
转载
2017-02-21 10:30:00
79阅读
2评论
vue项目初始化1. 生成package.json文件> npm init2. 安装依赖> npm i webpack vue vue-loaderMacBook-Air:vue-webpack-todo yuhua$ npm i webpack vue vue-loader> fsevents@1.2.4 install /Users/yuhua/Desk...
原创
2021-09-02 10:44:38
294阅读
建项目ts_demo；进入ts_demo文件夹，打开控制台npminitnpmi-dtypescriptnpmi-dts-nodenpminstalltsc-initlaunch.json内容：{//UseIntelliSensetolearnaboutpossibleattributes.//Hovertoviewdescriptionsofexistingattributes.//Formor
原创
2020-09-07 15:35:09
3488阅读
1.webpack5 中 Cannot find module 'webpack-cli/bin/config-yargs' 修改page.json文件中的脚本，webpack-dev-server 改写成 webpack serve 即可解决报错问题 2.TypeError: VueLoaderP ...
转载
2021-08-19 14:11:00
904阅读
2评论
