webpack命令打包报错汇总

问题一：安装本地webpack时，npm install webpack安装失败
解决办法：先全局安装npm install webpack -g，再本地安装npm install webpack

问题二：
webpack命令打包提示 - configuration.output.path: The provided value "./dist/js" is not an absolute path!
如图：

QQ截图20170711112700.png

那么加上 __dirname，成了absolute path
<pre>
output: {
path: __dirname + '/dist/js',
filename: 'bundle.js'
}
</pre>
没有报错了，但是dist/js目录没有生成bundle.js文件，

解决办法：

var path = require("path");
...
output: {
    path: path.resolve(\__dirname,  './dist/js'),
    filename: 'bundle.js' 
}

问题三：
当在webpack.config.js中配置postcss-loader时，提示错误如下图：

QQ图片20170711161614.png

首先配置好加载解析css的loader

{
        test : /\.css$/,
        loader: 'style-loader!css-loader?importLoaders=1!postcss-loader'
 }

以plugins 的方式配置postcss config，如下：

 plugins : [
        new webpack.LoaderOptionsPlugin({
            options : {
                postcss : function(){
                    return [
                        require('autoprefixer')({
                            broswers : ['last 5 versions']
                        })
                    ];
                }
            }
        })
    ]

这种方式不行！

正确的解决方法：
项目根目录下新建postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')({
            browsers: ["last 5 versions"]
        })
    ]
}