-
入口起点:👉详情
-
输出:👉详情
-
loader:👉详情
-
plugin:👉详情
-
配置:👉详情
-
模块:👉详情
-
模块解析:👉详情
-
Module Federation:👉详情
-
依赖图:👉详情
-
target:👉详情
-
manifest:👉详情
-
模块热替换:👉详情
-
typescript相关配置:👉详情
-
使用yarn安装webpack(参考👉详情):
yarn init
yarn install webpack webpack-cli --save-dev
yarn add lodash
yarn webpack
yarn webpack --config webpack.config.js
yarn add script
yarn run build -
管理资源:👉详情
yarn add style-loader css-loader ;
yarn run build ;
yarn add csv-loader xml-loader ;
yarn run build ;
yarn add toml yamljs json5 ;
yarn run build -
回退操作:👉详情
yarn remove css-loader csv-loader json5 style-loader toml xml-loader yamljs -
管理输出:👉详情
预先准备: yarn run build ;设置 HtmlWebpackPlugin:yarn add html-webpack-plugin yarn run build ; -
自动编译代码:👉详情
(webpack-dev-server) -
代码分离:👉详情 ( yarn run build)
-
如何配置webpack项目(使用yarn作为包管理器时):👉参考资料
- 创建一个demo文件夹:mkdir demo;
- 进入文件夹:cd /demo;
- 安装 webpack配置(生成node_modules):yarn add webpack-cli ;
- 安装webpack:yarn add webpack;
- 初始化项目(生成package.json文件):yarn init -y ;
- 在src文件夹下面建立入口文件index.js和依赖文件dada.json;
- 开发环境下的打包(生成dist文件夹和main.js文件):yarn webpack ./src/index.js -o ./dist/bundle --mode=development;
- 生产环境下的打包(生成dist文件夹和main.js文件):yarn webpack ./src/index.js -o ./dist/bundle --mode=production。
webpack默认可以处理js文件和json文件,生产环境比开发环境多了压缩代码和代码混淆。
- 使用webpack项目基础配置完成打包:
- 前面步骤同上;
- 在demo文件夹下创建webpack.config.js文件,在该文件内进行基础配置;
- 再次打包(去除命令中的模式)
- webpack项目配置loader完成样式打包:
- 前面步骤同上;
- 添加style-loader依赖(将样式内容的js插入style标签):yarn add style-loader;
- 添加css-loader依赖(将css文件转换为js文件):yarn add css-loader;
- 在webpack.config.js文件内配置style-loader和css-loader依赖;
- 再次进行打包即可
- webpack项目配置插件完成打包:
- 前面步骤同上;
- 添加html-webpack-plugin依赖:yarn add html-webpack-plugin;
- 在webpack.config.js文件内配置html-webpack-plugin依赖(注意模板路径);
- 再次打包(dist文件夹下多生成出一个index.html文件)
- webpack项目打包图片资源:
- 前面步骤同上;
- 添加url-loader依赖:yarn add url-loader;
- 添加html-loader依赖:yarn add html-loader;
- 添加file-loader依赖:yarn add html-loader;
- 再次打包
- webpack项目实现代码热更新:
- 前面步骤同上;
- 添加devServer依赖:yarn add webpack-dev-server;
- 再次打包