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"]
        })
    ]
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,227评论 7 35
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,710评论 7 110
  • Webpack学习总结 此文只是自己学习webpack的一些总结,方便自己查阅,阅读不变,非常抱歉!! 下载安装:...
    Lxs_597阅读 995评论 0 0
  • 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过...
    阳阳阳一堆阳阅读 3,336评论 0 5
  • 是否开始迷茫是否学会颓废是否无所事事 告诉你,别堕落,你没有资格 生来不是豪门无王子公主之命没有时间金钱等不起仰望...
    豫视西影阅读 913评论 2 5