Webpack基本配置

一.拆分配置和merge

webpack.common.js 公共环境
webpack.dev.js 开发环境
webpack.prod.js 线上环境
path.js路径

package.json中

用smart 进行merge合并
smart的使用：
webpack.dev.js中

webpack.prod.js

二.启动本地服务

webpack.dev.js 开发环境里面配置

三.处理ES6

在webpack.common.js
babel-loader

entry 里面index 默认为index.js 而且已经把css文件import进index.js中了，所以入口只有一个index.js即可

include 包含 exclude排除

.babelrc:

四.处理样式

也是在webpack.common.js中

注意loader 的执行顺序从后往前
先css-loader 解析一个css文件，因为webpack是模块化的无法自动识别js文件还是css文件
然后 style-loader插入到页面中

postcss是考虑兼容性的
建立一个postcss.config.js

postcss-loader和autoprefixer都是需要安装的

五.处理图片

webpack.dev.js

webpack.prod.js

注意出口output的filename采取hash的形式

最后说一下path

webpack.dev.js

path.js

loader 和use区别

options为loader可选的配置项