在使用webpack 4.35.2版本的时候下载loader会下载失败,是版本的问题,下面是以下完整用到过的loader配置的版本信息。
1.package.json文件代码 一些配置版本信息
{
"dependencies": {
"axios": "^0.21.4",
"pubsub-js": "^1.9.3",
"vue": "^2.6.14",
"vue-router": "^3.5.2"
},
"devDependencies": {
"@babel/core": "^7.15.5",
"@babel/preset-env": "^7.15.6",
"babel-loader": "^8.2.2",
"css-loader": "^3.2.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"style-loader": "^1.0.2",
"url-loader": "^4.1.1",
"vue-loader": "^15.9.8",
"vue-template-compiler": "^2.6.14",
"webpack": "^4.35.2",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.11.2"
},
"name": "webpack",
"version": "1.0.0",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"show": "webpack -v",
"start": "node ./src/main.js",
"build": "webpack",
"dev": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
2.webpack-config.js 配置信息
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const webpack = require('webpack')
module.exports = {
// pro 开发版本 dev生产版本
mode: 'production',
//想要处理文件
entry: './src/main.js',
//出口
output: {
//打包文件的目录
path: path.join(__dirname, './dist/'),
//打包文件
filename: 'main.js',
//只要关于url都会拼接这个地址
// publicPath:'dist/'
},
devServer: {
contentBase: './dist',
// open:true,
hot: true
},
module: {
rules: [{
test: /\.css$/, //正则表达 规定css结尾的
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [{
loader: 'url-loader',
//可以定义一些东西
options: {
//当图片小于limit时候会用-loader进行加载
//当图片大于limit时候会用file-loader进行加载
limit: 5000,
//意思是在img文件中创建图片 本身名字 + hash8位 + 后缀扩展名(jpg,png...)
name: 'img/[name].[hash:8].[ext]'
}
}],
},
{
test: /\.less$/,
loader: [
// compiles Less to CSS
'style-loader',
'css-loader',
'less-loader',
],
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
}),
new VueLoaderPlugin(),
new webpack.HotModuleReplacementPlugin()
],
//第二种vue解决办法 vue组件显示不出来的解决方案 一般都用render: h=>h.xxx(vue组件名)
// resolve:{
// alias: {
// 'vue$':'vue/dist/vue.esm.js'
// }
// }
}