webpack中的loader的配置

安装babel: npm install --save-dev babel-loader babel-core

此处如果要用lastest,需要：

npm install --save-dev babel-preset-latest

配置babel如下所示：

这里path是nodejs提供的接口，__dirname为node中的一个全局变量，表示当前根目录。path.resolve(__dirname, "path")将路径解析为绝对路径。

为了能自动给需要前缀的css属性加上前缀，我们需要安装postcss：

npm install postcss-loader --save-dev

安装postcss以后，我们需要安装postcss的插件autoprefixer,这个插件用来实现给有需要的属性自动添加前缀:

npm install autoprefixer --save-dev

在module属性的同级配置postcss,如下：

为了使我们用@import引入的css文件也能自动添加前缀，我们需要给css-loader添加参数。

以上语法都是webpack 1.x的,2.x区别很大，语法有改动，https://webpack.js.org/guides/migrating/

另外还有一些其他的loader:

加载html文件的： npm install html-loder --save-dev

加载图片等文件的： npm install file-loader --save-dev

将图片转成base64的： npm install url-loader --save-dev

压缩图片的：npm install image-webpack-loader --save-dev

安装和加载less: npm install less --save-dev

npm install less-loader --save-dev