Gulp+Webpack+Vue

Gulp Vue

npm 模块安装机制简介.

This repo is a collection of simple demos of Webpack[By阮一峰].
https://github.com/ruanyf/webpack-demos

Webpack插件路径修改

 resolveLoader: {
    root: path.join(__dirname, "node_modules")
  },
  resolve: {
    root: path.join(__dirname, "node_modules"),
    modulesDirectories: ['node_modules'],
    // Allow to omit extensions when requiring these files
    extensions: ["", ".js", ".jsx"]
  }

Vue样式文件修改注意事项

书写vue样式文件中url路径后不能添加与无关的东西，。比如下代码：

.drawbox {
    width: 87%;
    height: 99%;
    position: absolute;
    right: 6%;
    bottom: 13.5%;
    background: url(./../assets/rotary.png);
    /*background: url(./../assets/rotary.png?v1)无法解析*/
    background-size: 100% 100%;
}

无法解析，编译时会报错如下：

ERROR in ./assets/rotary.png?v1
Module parse failed: E:\xxx\assets\rotary.png?v1 Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

30分钟手把手教你学webpack实战
WebPack 常用功能介绍