vue.js 配置webpack-dev-server 的错误解决方法

webpack进阶之loader篇

解决如下：

源webpack.config.js中如下：

devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress:true
},

没有progress:true这个命令，所以删除即可。

解决如下：

webpack的路径不对，执行命令修改：cnpm link webpack

如果webpack在mac下出错：修改.bash_profile文件，需要更改环境变量：
export NODE_PATH=”/usr/local/lib/node_modules”

css 打包错误：

- 解决如下：
在vue1.0中，在webpack.config.js中配置css文件时

 　　module:{　　　　loaders:[　　　　　　{　　　　　　　　test:/\.css$/,　　　　　　　　loader:'style!css'　　　　　　}　　　　]　　}

在vue2.0中，在webpack.config.js中配置css文件时，必须要写全，不能和vue1.0一样简写

 　　module:{　　　　rules:[ //这里改成了rules　　　　　　{　　　　　　　　test:/\.css$/,　　　　　　　　loader:'style-loader!css-loader' //这里必须要写全，不能和vue1.0一样简写 　　　　　　}　　　　]　　}

Vue2.0使用过程常见的一些问题总结学习

打包sass的错误：

解决如下：执行node-sass的安装命令

cnpm install node-sass --save-dev

然后在打包如下：

打包图片等资源的错误：

• 解决如下：
  在命令行安装 npm install –save-dev url-loads 之后还需要安装
  npm install –save-dev file-loader
  
  • 配置文件中如下：

  module: {        loaders: [        /*          {            test: /\.css$/,            loaders: ['style-loader', 'css-loader'],            include: APP_PATH          },        */          {            test: /\.scss$/,            loaders: ['style-loader', 'css-loader', 'sass-loader'],            include: APP_PATH          },          {            test: /\.(png|jpg)$/,            loader: 'url-loader?limit=40000'          }        ]    },    //输出的文件名 合并以后的js会命名为bundle.js    output: {        path: BUILD_PATH,        filename: 'bundle.js'    },     //其他解决方案配置    // resolve: {    //     extensions: ['', '.js', '.json', '.css', '.scss','.png','.jpg']//添加在此的后缀所对应的文件可以省略后缀    // },    //添加我们的插件 会自动生成一个html文件    plugins: [        new HtmlwebpackPlugin({          title: 'Hello World app 222'        })    ]

报错。。。missing webpack???

• 解决

检查下package.json文件里script处有没有对应的webpack命令配置   或者你直接运行webpack就行了  不用npm run webpack "scripts": {    "webpackdev": "better-npm-run webpack:dev",    "webpackprod": "better-npm-run webpack:prod",    "dev": "webpack-dev-server --line --hot",    "build": "webpack -p",    "test": "echo \"Error: no test specified\" && exit 1"  },

Webpack 常见静态资源处理 - 模块加载器（Loaders）+ExtractTextPlugin插件

./~/extract-text-webpack-plugin/loader.js?{“omit”:1,”remove”:true}!

• 错误截图

  

• 解决如下：

原因是在2.0 的版本中更新了操作const ExtractTextPlugin = require('extract-text-webpack-plugin');const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');配置如下：_module:{        rules:[            {                test:/\.vue?$/,                include:[path.resolve(config.srcDir)],                exclude:[path.resolve(__dirname,"../node_modules")],                loader:'vue-loader',                options:{                    loaders:{                        use:extractCSS.extract({                            loader:'css-loader',                            fallback:'vue-style-loader'                        })                    }                }            }        ]    },