webpack2-配置1

webpack对于css、less、图片的处理以及es6转es需要相对应的loader。
在配置的时候我们可以手动生成webpack.config.js文件。该文件名称是固定的。在该文件中，定义入口、出口、及其他规则。

const { options } = require('less')
const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath:'dist/'//在url前面加上对应的路径
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        //css-loader只负责将css文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader时，是从右向左
        use: ['style-loader', 'css-loader']
      }, {
        //处理less
        test: /\.less$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          { loader: "less-loader" }
        ]
      }, {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              //当加载的图片，小于limit时，会将图片编译成base64字符串形式
              //当加载的图片，大于limit时，需要使用file-loader模块进行加载，
              //直接下载file-loader 即可，不用配置。
              limit: 8194,
              //img：文件要打包到的文件夹
              //name:获取图片原来的名字，放在该位置
              //hash:8:为了防止图片名称冲突，依然使用hash,但是只保留8位
              //ext:使用图片原来的扩展名
              //但是我们整个程序是打包在dist文件夹下的，所以这里我们需要在路径下
              //再添加一个dist/，配置在output选项中。如上：publicPath:'dist/'
              name:'img/[name].[hash:8].[ext]'
            },
           
          }
        ]
      },{
        //es6 转 es5   npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
        test: /\.js$/,
        //exclude 排除
        //include 包含
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }
    ]
  }

}

下载loader

npm install less-loader@5.0.0 --save-dev

卸载loader

npm uninstall less-loader@5.0.0 --save-dev