webpack基本配置

1. 入口文件

对于入口文件下面几种表述方式
官网参考

// 方式一
module.exports = {
  entry:  './src/main.js'
}
// 等价于 推荐这种方式
module.exports = {
  entry: {
    main: './src/main.js'
  }
}
// 多个入口文件
module.exports = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
}

2. 解析less文件

在webpack.config.js文件中配置rules

module.exports = {
  entry: './src/main.js',
  module: {
    rules: [
      {
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader'
      }
    ]
  }
}

根据上述的配置文件可以知道，我们需要在package.json文件中引入style-loader, css-loader,less-loader;需要注意的是style-loader需要放在dependencies中，而style-loader,css-loader只需放在devDependencies中即可

注：如果想在vue的js文件中引入一个less文件需要写成require('!style-loader!css-loader!less-loader./less/common.less')
要使用less语法，需要在style上添加lang='less'

3. 使用babel-loader

module.exports = {
  ...
  modules: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader'
        },
        // 排除 node_modules下的文件
        exclude: '/node_modules'
      }
    ]
  }
}