webpack概念
2018-07-02 19:05:12 9 举报AI智能生成
webpack笔记
作者其他创作
大纲/内容
loaders
autoprefixer
自动添加前缀的插件
css
css-loader
实现 require()\@import的功能
options
modules:指定启用css modules
localIdentName:指定css的类名格式
style-loader
计算后的样式加入页面中
Less Loader
Sass Loader
Stylus Loader
postcss-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 中
BannerPlugin
添加版权声明的插件
Hot Module Replacement
注意点
webpack-cli必须要全局安装，否则不能使用webpack指令；
webpack也必须要全局安装，否则也不能使用webpack指令。
webpack4.x中webpack.config.js这样的配置文件不是必须的。
默认入口文件是./src/index.js，默认输出文件./dist/main.js。
Babel
插件
babel-core
babel-loader
解析JSX：babel-preset-react
解析Es6：babel-env-preset
.babelrc配置
取代了在modules中配置options命令
简介
静态模块打包器
递归地构建一个依赖关系图
安装
1、全局安装npm install -g webpack
2、项目安装npm install --save-dev webpack
3、新建index.html
初始化
package.json文件
命令 npm init
配置
安装
本地安装
全局安装
不推荐全局安装 。会将你项目中出现锁定指定版本的情况
配置文件
webpack.config.js
entry入口文件
output存放路径
Source Maps调试
devtool:source-map
devtool:cheap-module-source-map
devtool:eval-source-map
devtool:cheap-module-eval-source-map
devServer本地服务器
安装：npm install --save-dev webpack-dev-server
配置
contentBase
服务器访问的基本目录
port
设置端口
inline
自动刷新页面
historyApiFallback
open
自动拉起游览器
host
设置服务器的ip地址
modules
test
匹配loaders所处理文件的拓展名
loader
loader的名称
include/exclude
手动添加必须处理的文件或屏蔽不需要处理的文件
query
loaders提供额外的设置选项
容器
webpack-dev-server 在内部使用
webpack-dev-middleware
模块热替换
tree shaking
移除 JavaScript 上下文中的未引用代码
0 条评论
下一页
