今天复习了下webpack的常用loaders，其实习惯ES6开发的话，webpack的config.js基础配置应该是比较固定：
首先是JS，我们ES6要转为ES5，需要用到babel转码：
1.
npm install --save-dev babel-loader babel-core
2.在config.js中配置：
1 module: {2 ??rules: [3 ????{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }4 ??]5 }3.配置babel的preset：
npm install babel-preset-env --save-dev
4.项目目录下创建.babelrc文件，内容为：
1 {2 ??"presets": ["env"]3 }5.当我们需要用到promise、map或ES6数组方法的时候，还要下载polyfill：
npm install --save babel-polyfill
6.使用polifill时候，要在entry中引入：
module.exports = { ?entry: ["babel-polyfill", "./app/js"]};其次是css方面的loaders:
1.
npm i css-loader style-loader --save-dev
2.如果想使用预处理器比如sass：
npm i sass-loader node-sass --save-dev
*node-sass最近几个版本安装可能会报错，我今天就遇到，github也有网友反映了这问题（见上篇）
*使用sass要先安装ruby，然后命令行gem sass （这不影响我们在项目的webpack中使用sass）
3.postcss-loader是必须的，除非你想每个新的css3样式都查前缀：
npm i postcss-loader autoprefixer --save-dev
使用postcss的时候，文档推荐创建本地postcss-config.js配置文件，这样在webpack.config.js中在需要postcss-loader的时候直接调用就好了：
1 module.exports = {2 ??plugins: [3 ????require(‘autoprefixer‘)4 ??]5 }然后是文件方面的,帮我们处理图片等：
npm i file-loader url-loader --save-dev
最后配置的config文件是：
1 const path=require(‘path‘); 2 module.exports={ 3 ????entry:[‘babel-polyfill‘,‘./js/a.js‘], 4 ????output:{ 5 ????????path:path.resolve(__dirname,‘dist‘), 6 ????????filename:‘[name].js‘ 7 ????}, 8 ????module: { 9 ??????rules: [10 ??????{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },11 12 ??????{test:/\.css$/,use:[‘style-loader‘,‘css-loader‘,‘postcss-loader‘]},13 14 ??????{test:/\.scss$/,15 ??????????use:[‘style-loader‘,16 ??????????{loader:‘css-loader‘,options:{importLoaders:2}},17 ??????????‘postcss-loader‘,‘sass-loader‘]18 ??????},19 ??????//url20 ??????{21 ????????test: /\.(png|jpg|gif)$/,22 ????????use: [23 ??????????{24 ????????????loader: ‘url-loader‘,25 ????????????options: {26 ??????????????limit: 819227 ????????????} ?28 ??????????}29 ????????]30 ??????},31 32 ??????{33 ????????test: /\.(png|jpg|gif)$/,34 ????????use: [35 ??????????{36 ????????????loader: ‘file-loader‘,37 ????????????options: {38 ??????????????name: ‘[path][name].[ext]‘,39 ??????????????outputPath: ‘images‘40 ??????} ?41 ??????????}42 ????????]43 ??????}44 ??????45 ????]46 }47 48 }复习webpack的常用loader
原文地址：http://www.cnblogs.com/alan2kat/p/7611099.html