配置webpack3.6.0处理css、less、es6、图片文件、vue

首先配置webpack的基本配置，包括entry( 入口)、output（出口）：@H_404_1@

  创建webpack.config.js文件放置所有的webpack的配置，@H_404_1@

接下来是配置命令：@H_404_1@

  module.exports={@H_404_1@

entry:"",@H_404_1@

output:{@H_404_1@

    path:"",(写绝对路径，打包后的输出文件，一般通过node的path以及path.resolve的拼接函数，进行动态获取)@H_404_1@

    filename:""@H_404_1@

}@H_404_1@

}@H_404_1@

然后提到的是如何将npm run XXX命令与webpack命令形成映射？@H_404_1@

在package.json文件中的script下对应添加@H_404_1@

"scripts":{@H_404_1@

    “build”:"webpack",@H_404_1@

}@H_404_1@

类似的代码就行了@H_404_1@

下面是webpack如何对css文件进行处理？@H_404_1@

（webpack的扩展处理都是通过安装对应的loader进行的）@H_404_1@

处理css需要的loader为：css-loader、style-loader@H_404_1@

处理css需要的webpack配置为：@H_404_1@

在module下添加相应的rules@H_404_1@

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }

 @H_404_1@