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'
                        })
                    }
                }
            }
        ]
    },