Skip to main content

webpack 笔记

在线文档​

文档地址

初始化​

创建 webpack-demo 文件夹，初始化 npm 项目，安装 webpack 相关包，使用 webpack 4+ 版本，需要安装 CLI

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev (注:--save-dev 等效于 -D)

安装其他依赖包​

以 loadsh 为例

npm install --save lodash

编译​

npx webpack

默认以 src/index.js 为入口打包编译项目

指定配置文件编译，配置文件名默认为 webpack.config.js 所以此命令等价于 npx webpack

npx webpack --config webpack.config.js

根据提示创建配置文件​

npx webpack init

安装样式加载器​

npm install --save-dev style-loader css-loader

安装 csv、xml 加载器​

npm install --save-dev csv-loader xml-loader

安装一些数据解析包​

npm install toml yamljs json5 --save-dev

卸载包​

npm uninstall css-loader csv-loader json5 style-loader toml xml-loader yamljs

html 生成插件​

npm install --save-dev html-webpack-plugin

开发服务器​

npm install --save-dev webpack-dev-server

web 框架加开发中间件​

npm install --save-dev express webpack-dev-middleware

提取 css 插件​

npm install --save-dev mini-css-extract-plugin

执行 node_modules 下 webpack 模块，生成状态 json​

npx webpack --json > stats.json

设置国内镜像​

npm config set registry https://registry.npmmirror.com