loaders
css
css-loader
实现 require()\@import的功能
options
modules:指定启用css modules
localIdentName:指定css的类名格式
Less Loader
Sass Loader
Stylus Loader
简介
Loaders需单独安装并且要在webpack.config.js中modules关键字下进行配置
处理那些非 JavaScript 文件
配置属性
test 标识出应该被对应的 loader 进行转换的某些文件
use 属性,表示进行转换时,应该使用哪个 loader
plugins
自动编译
"watch": "webpack --watch"观察者模式
webpack-dev-server
webpack-dev-middleware
相关插件
clean-webpack-plugin
每次构建前清理 输出 文件夹
HtmlWebpackPlugin
创建了一个全新的文件,所有的 bundle 会自动添加到 html 中
Hot Module Replacement
注意点
webpack-cli必须要全局安装,否则不能使用webpack指令;
webpack也必须要全局安装,否则也不能使用webpack指令。
webpack4.x中webpack.config.js这样的配置文件不是必须的。
默认入口文件是./src/index.js,默认输出文件./dist/main.js。
简介
静态模块打包器
递归地构建一个依赖关系图
安装
1、全局安装npm install -g webpack
2、项目安装npm install --save-dev webpack
3、新建index.html
初始化
package.json文件
命令 npm init