使用webpack处理项目中的资源文件

    上周学习了从0开始搭建项目，并用webpack进行打包。然而实际项目中，我们需要处理的不仅仅是简单的js和css文件，可能还需要处理ES6、CoffeeScript、less、Sass以及图片等其他资源文件。这时就需要引入各种Loader了。

    先来按照常用的项目结构新建几个目录及文件，layer为项目中自定义的组件，我们的目标是使用webpack来处理组件中的模板文件、less文件及使用ES6语法书写的js文件。

    首先使用babel-loader对js文件进行处理，依旧在webpack.config文件中进行设置：

var htmlWebpackPlugin = require('html-webpack-plugin');  
var path = require('path'); //node的原生方法，不需要安装，用于在配置中使用绝对路径
  
module.exports = {   
  entry: './src/app.js',  
  output: {    
    path: './dist',   
    filename: 'js/bundle.js'    
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  //匹配以js结尾的文件
        loader: 'babel',  //使用babel处理js文件，使用前需要使用npm安装babel-loader和babel-core
        exclude: path.resolve(__dirname,'node_modules'),  //不让babel处理该目录下的文件，以提升webpack的打包效率
        include: path.resolve(__dirname,'src'  //设置babel的打包范围，减少webpack打包时间
        query: {
          presets: ['latest'], //配置babel的参数，指定将js文件处理成哪种规范标准，也可以设置成‘es2015’等，设置后也需要使用npm安装相应的插件，如npm install --save-dev babel-preset-latest 
        } 
      } 
    ]
  },
  plugins: [
    new htmlWebpackPlugin({ 
      filename: 'index.html',
      template: 'index.html',
      inject: 'body', //表示将打包后的文件插入到body中，‘head’表示插入到head中，false表示不自动插入 
    }) 
  ] 
} 

    这时，就可以将ES6语法转化成webpack能识别的语法了。此外，还可以在.babelrc文件和package.json中对babel的query进行配置，如下：

'babel': {
  'presets': ['latest']
}

    接下来，开始处理css，依旧在webpack.config中配置loaders：

modules:[
  {
    loaders:[
      {
        test: /\.css$/, //匹配以css结尾的文件
        loader: 'style-loader!css-loader?importLoaders=1!postcss-loader' //使用!将loader串联，使用前需先使用npm安装loader。?importLoaders=n表示在css-loader之后需要几个loader来处理css中通过import引入的资源
      }
    ]
  }
],
postcss:[
  require('autoprefixer')({
    returnbroswers:['last 5 versions'], //表示对浏览器最近的5个版本进行处理
  }) //autoprefixer为postcss-loader的插件，需通过npm安装后使用，用于将css样式自动加浏览器前缀。
],

    以上，是对处理css文件的配置，如需处理less或sass文件，则需要安装及配置less-loader和sass-loader：

loaders:[
  {
    test: /\.less$/, //匹配以css结尾的文件
    loader: 'style!css!postcss!less' //可以省略loader进行书写，loader的处理顺序是从右到左
  },
  {
    test: /\.scss$/, //匹配以scss结尾的文件
    loader: 'style!css!postcss!sass' 
  }
]

    接下来需要处理模板文件，使用npm安装html-loader，并进行配置：

loaders:[
  {
    test: /\.html$/, //匹配以html结尾的文件
    loader: 'html-loader'
  }
]

    配置完成后，可以在layer.js中引入模板文件了：

import './layer.less';
import tpl from './layer.html';

function layer(){
  return{
    name: 'layer',
    tpl: tpl  //此处只是简单的将模板作为字符串处理，也可以引入.tpl等文件模板来渲染数据，只需安装配置相应的loader，如ejs-loader即可。
  }
}

export default layer;

    然后在app.js中将组件模板插入到index.html：

import Layer from './components/layer/layer.js';

const App = function(){
  var dom = document.getElementById('app');
  var layer = new Layer();
  dom.innerHTML = layer.tpl;
}
new App();

    此时，再运行webpack，即可在打包后的文件中，正确显示我们需要的内容。

    

    对图片的引用分为三种情况，在根目录index.html中引用，在组件的模板文件中引用，在css中引用。不管哪种方式，首先都需要安装file-loader。   

loaders:[
  {
    test: /\.(png|jpg|gif|svg)l$/i, //匹配以各种格式结尾的图片
    loader: 'file-loader',
    query:{
      name: 'assets/[name]-[hash:5].[ext]'  //配置打包后存放的文件路径和文件名，name表示原图片名,hash:5表示5位的哈希值,ext表示文件类型。
    }
  }
]

    但是，当在组件的模板文件中使用相对路径直接引用图片时，打包后的图片路径是错误的。这种情况下，建议使用cdn的绝对路径引入图片。如果必须使用相对路径，则需通过require的形式引入。

    此外，还可以使用url-loader：

loaders:[
  {
    test: /\.(png|jpg|gif|svg)l$/i, //匹配以各种格式结尾的图片
    loader: 'url-loader',
    query:{
      limit: 2000  //单位为byte，若图片大小小于limit，则将图片转化为base64格式引入
    }
  }
]

    如上，所有的文件都可以通过webpack处理啦～