Webpack
Webpack 教程
dabusidede
Github:https://github.com/IceEmblem,
Word文档文章:https://github.com/IceEmblem/LearningDocuments
展开
-
webpack 调试 npm 包
如下,一般npm包的目录结构dist:以编码的代码目录src:源码代码目录package.json{ "main": "dist/src/index.js", ...}main指向的是dist目录,要想调试源码,我们需要更改为src目录,如下:{ "main": "src/index.js", ...}指定include node_modules路径默认情况webpack不对node_modules目录编码(一般我们代码也不包含node_module原创 2020-08-27 14:07:56 · 429 阅读 · 0 评论 -
Webpack 踩坑之旅
node_modules包不编译一般情况下,node_modules安装的包都已经被打包为CommonJS规范的代码,代码的入口文件由包下package.json的main字段,如果你发现node_modules安装的包不是ES5语法(如使用了class,使用了jsx),那么你完了,你将无法通过编译,因为babel7以上会默认不编译node_modules目录下的代码(大多数情况下,我们的webpack的配置也是不打包node_modules目录的),所以我们需要配置include字段,包含我们要打包的目原创 2020-08-15 12:40:17 · 458 阅读 · 0 评论 -
18 Webpack 代码分离
代码分离此特性能够把代码分离到不同的bundle 中,然后可以按需加载或并行加载这些文件。意思就是动态加载有三种常用的代码分离方法:入口起点:使用entry配置手动地分离代码。防止重复:使用CommonsChunkPlugin去重和分离chunk。动态导入(推荐):通过模块的内联函数调用来分离代码。入口起点(entry points)先来看看如何从main bundle 中分离另一个模块:webpack.config.jsconstpath =re...转载 2020-07-20 11:40:05 · 226 阅读 · 0 评论 -
17 webpack 服务器
使用 webpack-dev-serverwebpack-dev-server为你提供了一个简单的 web 服务器,并且能够实时重新加载安装包npm install--save-dev webpack-dev-server修改webpack.config.jsconst path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.expor...转载 2020-07-20 11:33:10 · 264 阅读 · 0 评论 -
16 Webpack 开发与生产配置分离
如下,我们将开发与生产的 webpack 配置分离配置我们先从安装webpack-merge开始:npm install--save-dev webpack-mergeprojectwebpack-demo|- package.json- |- webpack.config.js+ |- webpack.common.js+ |- webpack.dev.js+ |- webpack.prod.js|- /dist|- /src...转载 2020-07-20 11:30:40 · 218 阅读 · 0 评论 -
15 Webpack 使用环境变量
在入口自定义环境变量webpack --env.NODE_ENV=local --env.production --progress在webpack(nodejs)中访问module.exports =env =>{// Use env.<YOUR VARIABLE> here:console.log('NODE_ENV: ',process.env.NODE_ENV)// 'local'console.log('Production: '...转载 2020-07-20 11:28:28 · 236 阅读 · 0 评论 -
14 Webpack 其他功能
外部代码调用webpack代码output: { path: __dirname +"/../IceEmblemWeb/Scripts/AdminiHome/GameManage", filename: "[name].bundle.js",chunkFilename: "[id].chunk.js",libraryTarget: 'umd'},设置模块路径webpack.config.js配置var path = require("path");...转载 2020-07-20 11:27:44 · 200 阅读 · 0 评论 -
13 Webpack 资源文件引入
转存失败重新上传取消转载 2020-07-20 11:26:49 · 305 阅读 · 0 评论 -
12 Webpack 输出管理
基本配置:module.exports={entry:{account:__dirname+"/Account/account.jsx",Account1:__dirname+"/Account/account1.jsx"},output:{//输出文件目录路径path:path.join(__dirname,"js"),//输出文件名...转载 2020-07-20 11:22:38 · 301 阅读 · 0 评论 -
11 Webpack 入口
单入口配置constpath =require('path');module.exports ={entry:'./src/index.js',output:{filename:'bundle.js',path:path.resolve(__dirname,'dist')}};多入口配置//已简化varpath=require("path");module.exports={ent...转载 2020-07-20 11:20:08 · 180 阅读 · 0 评论 -
10 Webpack 如何集成第三方js库
正文本篇主要介绍如何集成常用的js库(即如何在我们的js中使用js库),以jquery 为例,同理可扩展到其他js库集成jquery.min.js我的的jquery.min.js文件在 ./src/lib 目录中,如何集成到我们的项目中?1.在src目录下增加 pathmap.json,代码如下:{"jquery":"jquery.min.js",......}当在js中使用import $from 'jquery'; 时,会替换成import...转载 2020-07-20 11:14:02 · 374 阅读 · 0 评论 -
9 Webpack 安装
webpack的官网是http://webpack.github.io/,文档地址是http://webpack.github.io/docs/安装首先要安装 Node.js, Node.js 自带了软件包管理器 npmnodejs初始化先执行npm init,按回车默认生成,其会生成一个package.json文件用npm 安装webpack------------------------------------------------------------...转载 2020-07-20 11:10:42 · 207 阅读 · 0 评论 -
8 Webpack 模块
模块(modules)在模块化编程中,开发者将程序分解成离散功能块(discrete chunks of functionality),并称之为模块(一般一个js文件定义一个ES6类,一个文件即一个模块)。什么是 webpack 模块对比Node.js 模块,webpack模块能够以各种方式表达它们的依赖关系,几个例子如下:ES2015 import语句 CommonJSrequire()语句 AMDdefine和require语句 css/sass/less ...转载 2020-07-19 16:26:03 · 213 阅读 · 0 评论 -
7 webpack 配置
配置(configuration)webpack 的配置文件,是导出一个JS对象的 JavaScript 文件,该文件会被NodeJs运行基本配置如下是webpack配置的示例webpack.config.jsvarpath =require('path');module.exports ={mode:'development',entry:'./foo.js',output:{path:path.resolve(__di...转载 2020-07-19 16:24:23 · 181 阅读 · 0 评论 -
6 Webpack 插件
插件目的在于解决loader无法实现的其他事。插件代码示例webpack插件是一个具有apply属性的 JavaScript 对象。apply属性会被 webpack compiler 调用,并且 compiler 对象可在整个编译生命周期访问。如下是一个插件的简单示例:ConsoleLogOnBuildWebpackPlugin.jsconstpluginName ='ConsoleLogOnBuildWebpackPlugin';classConsoleL...转载 2020-07-19 16:23:03 · 218 阅读 · 0 评论 -
5 Webpack loader
示例例如,你可以使用 loader 告诉 webpack 如何加载 CSS 文件,或者如何将 TypeScript 转为 JavaScript。为此,首先安装相对应的 loader:npm install--save-dev css-loadernpm install--save-dev ts-loader然后指示 webpack 对每个.css使用css-loader,以及对所有.ts文件使用ts-loader:webpack.config.jsmodule.exp...转载 2020-07-19 16:20:43 · 163 阅读 · 0 评论 -
4 Webpack 模式
用法只在配置中提供mode选项:module.exports ={mode:'production'};在node中,有全局变量process表示的是当前的node进程。我们可以在js中访问process变量mode: development(开发模式)// webpack.development.config.jsmodule.exports = {+ mode: 'development'}会将process.env.NODE_ENV的值...转载 2020-07-19 16:19:22 · 190 阅读 · 0 评论 -
3 Webpack 输出
输出(output)指定输出打包的文件信息用法Filename:输出文件的文件名。Path:输出文件目录的绝对路径。webpack.config.jsconstconfig ={output:{filename:'bundle.js',path:'/home/proj/public/assets'}};module.exports =config;此配置将文件打包为bundle.js文件并输出到/hom...转载 2020-07-19 16:18:25 · 228 阅读 · 0 评论 -
2 Webpack 入口起点
单个入口(简写)语法webpack.config.jsentry属性的单个入口语法constconfig ={entry:'./path/to/my/entry/file.js'};module.exports =config;多入口语法webpack.config.jsconstconfig ={entry:{app:'./src/app.js',vendors:'./src/vendors.js'}...转载 2020-07-19 16:17:12 · 202 阅读 · 0 评论 -
1 Webpack 概念
阅读本系列教程,你需要对ES6的import,export有了解本系列教程1-8为webpack概念说明文档,其余为实际应用教程本教程转自Webpack中文文档:https://www.webpackjs.com/concepts/,经过个人修改而成笔者不生产水,我只是大自然的搬运工Webpack做了什么?如我们在src文件夹下面有a.js,b.js,c.js,其中a.js import了b.js,而b.js又import了c.js,而webpack可以将者3个文件打包成一个文件,.转载 2020-07-19 16:16:08 · 211 阅读 · 0 评论