初识 Webpack (五) 编译es6和样式分离

目录

编译es6

➀ 浏览器识别es6所需依赖

➁ webpack.config内容配置

将样式抽离

➀ 依赖安装

➁ 配置

---

• 编译es6

• ➀ 浏览器识别es6所需依赖

我们知道浏览器没有办法很好的识别es6语法，所以在实际使用过程中，我们需要将es6语法编译成es5，以便于浏览器识别；

在这里需要安装对应的插件：  

       

npm install [email protected] [email protected] -S

• ➁ webpack.config内容配置

1. 1 引入配置

1. 2 loader注意对js的解析，exclude标识排除该目录不进行解析【mode_module中也会有js文件】，presets【编译环境是2016】

1. 3 es6语法编译效果

1. 编译之前（涉及es6语法【let，箭头函数等】）
2. 编译之后

• 将样式抽离

• ➀ 依赖安装

npm install css-loader style-loader -S
npm install html-webpack-plugin extract-text-webpack-plugin -S

• ➁ 配置