webpack.config.js 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. //webpack 全局安装
  2. //npm install webpack -g
  3. module.exports = {
  4. //devtool:"source-map",
  5. //入口文件 相当于gulp.src 导入main.js
  6. entry: __dirname + "/app/main.js",
  7. //出口文件
  8. output: {
  9. //导出文件的名字
  10. filename: 'bundle.js',
  11. //导出的路径
  12. path: __dirname + "/public"
  13. },
  14. //配置加载器,这里是转换非JS文件类型的方法
  15. module: {
  16. loaders: [{
  17. //匹配对应的后缀文件类型
  18. //cnpm install style-loader css-loader
  19. test: /\.css$/,
  20. //用两个loader就用!隔开 style在css之前
  21. loader: "style-loader!css-loader"
  22. }, {
  23. test: /\.html$/,
  24. loader: "html-loader"
  25. }, {
  26. test: /\.(jpg|png|jpeg|gif)$/,
  27. loader: "url-loader"
  28. }, {
  29. //ES6^=>ES5
  30. test: /\.js$/,
  31. loader: "babel-loader",
  32. options: {
  33. "presets": [
  34. ['es2015', {
  35. modules: false
  36. }]
  37. ],
  38. }
  39. }, {
  40. //vue=>js
  41. test: /\.vue$/,
  42. loader: "vue-loader"
  43. }, {
  44. //vue=>js
  45. test: /\.scss$/,
  46. loader: "sass-loader"
  47. }, {
  48. //vue=>js
  49. test: /\.less$/,
  50. loader: "less-loader"
  51. }, {
  52. //ttf=>js
  53. test: /\.ttf$/,
  54. loader: "file-loader"
  55. }]
  56. },
  57. //加这一句
  58. resolve: {
  59. alias: {
  60. 'vue': 'vue/dist/vue.js'
  61. }
  62. },
  63. //webpackd的服务器
  64. devServer: {
  65. contentBase: "./public", //服务器需要加载的文件夹目录
  66. inline: true, //实时更新
  67. port: 12345,
  68. }
  69. }