Mac中webstorm安装webpack的loader版本和插件中遇见的问题,解决方式

看了codewhy老师的Vue视频,mac版本在webstorm添加一些loader是出现的问题

ERROR in ./src/img/1.jpg
Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The "from" argument must be of type string. Received undefined
    at validateString (internal/validators.js:124:11)
    at Object.relative (path.js:1053:5)
    at Object.loader (/Users/liyawei/webstorm_workspace/workFile/webspace/ch08-webspace引入uglifyjs插件,压缩js文件/node_modules/file-loader/dist/index.js:78:72)
    at Object.loader (/Users/liyawei/webstorm_workspace/workFile/webspace/ch08-webspace引入uglifyjs插件,压缩js文件/node_modules/url-loader/dist/index.js:127:19)

因为老师给的版本有些其他不兼容,或者是loader版本的问题,这是我整理好的loader文件和we b pa c k.config.js文件的配置
//package.json文件
{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^2.0.2",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.12.2",
    "less-loader": "^4.1.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "vue-loader": "^15.9.5",
    "vue-template-compiler": "^2.6.12",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^2.9.7"
  },
  "dependencies": {
    "babel-preset-env": "^1.7.0",
    "vue": "^2.6.12",
    "webpack": "^3.8.0"
  }
}

/*获取绝对路径*/
const path = require('path');

/*解决vue-loader14版本以上的的插件*/
const VueLoaderPlugin = require('vue-loader/lib/plugin');

/*在webpack中引入版权插件*/
const webpack = require('webpack');

/*将index.html文件一块打包的插件*/
const htmlWebpackPlugin = require('html-webpack-plugin')

/*对js文件压缩*/
const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');

module.exports={
	/*入口*/
    entry:'./src/main.js',
    /*出口*/
    output:{
    	/*输出到某个文件中,这里采用的是绝对路径*/
        path:path.resolve(__dirname,'dist/bundle'),
        /*文件的名字*/
        filename:'main.js',
        /*publicPath:'dist/'*/
    },
    resolve:{
        alias:{
        	/*默认先从这个文件下找*/
            'vue$':'vue/dist/vue.esm.js'
        }
    },
    plugins: [
    	/*解决vue-loader14版本以上的的插件*/
        new VueLoaderPlugin(),
        /*版权插件*/
        new webpack.BannerPlugin('最终解释权归***所有!'),
        /*将index.html文件一块打包的插件*/
        new htmlWebpackPlugin({
            template:'index.html'
        }),
        /*压缩js文件*/
        new uglifyjsWebpackPlugin()
    ],
    /**/
    devServer:{
    	/*服务这个文件夹*/
        contentBase:'./dist',
        /*实时监听*/
        inline:true
    },
    module: {
        rules: [
            /*加载css文件*/
            {
                test: /\.css$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" }
                ]
            },
            /*加载less文件*/
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            },
            /*解析css相关的图片,差过规定大小使用file-loader加载*/
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 30000,
                            name:'img/[name].[hash:8].[ext]'
                        }
                    }
                ]
            },
            /*将es6 --> es5*/
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            },
            /*配置vue-loader家在vue文件*/
            {
                test: /\.vue$/,
                use: ['vue-loader']
            }
        ]
    }
}
看过老师的视频在mac确实也出现了很多问题,当然我也是小白,中间有问题的话欢迎指出,我只是把我这一天多配置的东西分享下,帖子也翻烂了、心态也崩过,小土狗最后祝大家能够顺利的配置完成!!自学很难 贵在坚持,大家一起加油吧!
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值