Webpack 常见静态资源处理

Webpack官网： https://webpack.github.io/docs/cli.html将所有静态资源都认为是模块，比如JavaScript，CSS，LESS，TypeScript，JSX，CoffeeScript，图片等等，从而可以对其进行统一管理。为此Webpack引入了加载器的概念，除了纯JavaScript之外，每一种资源都可以通过对应的加载器处理成模块。和大多数包管理器不一样的是，Webpack的加载器之间可以进行串联，一个加载器的输出可以成为另一个加载器的输入。比如LESS文件先通过less-load处理成css，然后再通过css-loader加载成css模块，最后由style-loader加载器对其做最后的处理，从而运行时可以通过style标签将其应用到最终的浏览器环境。

一 常用loader

安装css/sass/less loader加载器

$ npm install file-loader css-loader style-loader sass-loader ejs-loader html-loader jsx-loader image-webpack-loader --save-dev

二：extract-text-webpack-plugin 改造项目-抽离css

使用 extract-text-webpack-plugin就可以把css从js中独立抽离出来
单独介绍：https://www.jianshu.com/p/55ea2125eb52

安装

$ npm install extract-text-webpack-plugin --save-dev

如果遇见错误：

(node:11636) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
//由npm i -D extract-text-webpack-p

lugin@nextfnpm 更新i -D extract- text-webpack-plugin @ next`

三：处理CSS前缀问题的神器——AutoPrefixer

单独介绍：https://www.jianshu.com/p/cc57bca79a8b
安装

npm install --save -dev autoprefixer