各文件类型和对应插件
HTML --> html-webpack-plugin 这个插件除了能生成单独的 html 文件以外, 还可以把对应的脚本和样式都自动的插入到合适位置, 不用手动引入了, 并且还支持哈希功能, 防止在更新的时候有浏览器缓存
脚本(项目主要用 es6 和 react) --> babel + babel-preset-react
webpack 本身以 js 为入口, 本来就支持 js 编译, 但是 使用了 es6 和 react , 所以要针对这些语法做处理
样式 --> css-loader + sass-loader
项目样式文件分为 css 文件和 sass 文件两种, 然后把生成的结果再用 style-loader 处理成一个 dom 里的 style 标签
图片/字体静态文件 --> url-loader + file-loader
webpack 常用模块
html-webpack-plugin ( html 单独打包成文件 )
它把模板语言组织起来经过加工, 最后生成一个可以在浏览器里运行的 html 文件
extract-text-webpack-plugin ( 样式打包成单独文件 )
把样式文件提取出来, 也就是提取在转换样式时最后 style-loader 生成的结果
CommonsChunkPlugin ( 提出通用模块 )
是 webpack 自带的, 通过它把模块里的通用部分自动抽取出来放在一个单独文件里. 抽出公用的 js 文件可以分担下 js 文件的大小. 插件的原理就是某个模块被引用的次数超过了一定的值, 比如 3 次就会被放到这个单独的文件.
webpack-dev-server
为 webpack 项目提供 web 服务的工具
让我们在浏览器里通过 http 的形式访问编译好的文件
它除了提供 web 服务以外, 还有几个比较重要的功能
一个是通过监听文件的改动然后自动刷新页面
另一个做代理, 路由拦截或者转发.
解决 webpack-dev-serve 多版本共存问题的处理方式:
和 webpack 一样, 使用 nodemodules 目录下的.bin 里面的 webpackdevserve 命令来解决