url-loader 没有正常工作

来源：1-3 Webpack4升级注意

薏米狮

2018-07-05

// webpack 中配置

module: {
rules:[
{
test: /\.css$/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: { importLoaders: 2,sourceMap: true, }
},
'stylus-loader',
'postcss-loader',
]
},{
test: /\.jsx$/,loader: 'babel-loader',
exclude: file => (
/node_modules/.test(file) &&
!/\.vue\.js/.test(file)
)
},{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},{
test: /\.(gif|jpg|jpeg|png|svg|ico|bmp)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 3000000,
name: 'resources/[path][name].[hash:8].[ext]'
}
}
]
},{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 1024,
}
},{
test: /\.(webm|mp4)$/,
loader: 'file-loader',
options:{
name: '[name].[hash:7].[ext]'
,outputPath: 'videos/'
}
},{
test: /\.vue$/,
loader: 'vue-loader',
options: createVueLoaderOptions(isDev)
}
]
}

// 代码部分 app.vue

<template>
<div id="app">
{{ msg }} Hell Vue
<Julyfooter></Julyfooter>
sssssssss
<div>
<img src="/static/1.jpg" />
</div>
sssssssssss
<div></div>
</div>
</template>
<style scoped>
#app {
color:brown;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background: #802e9b url(http://localhost:4000/2018/07/03/vue%E9%A1%B9%E7%9B%AE%E6%90%AD%E5%BB%BA%E7%AC%94%E8%AE%B0/5aa8db481d851.png) no-repeat center center ;
background-size: contain;
}
</style>
<script>
import Julyfooter from "./componetsJsx/foot.jsx"

// import img from 'static/1.jpg' 直接报错

export default {
name: "app",
data(){
return { "msg": " ( ." }
},
components: {
Julyfooter,
}
}
</script>

// package.json

{
"name": "july",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build:client": "cross-env JULY_ENV=production webpack --config ./build/webpack.config.js",
"build": "npm run clean && npm run build:client",
"clean": "rimraf dist",
"lint": "eslint --ext .js --ext .jsx --ext .vue client/",
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue client/",
"precommit": "npm run lint-fix",
"dev": "cross-env JULY_ENV=development webpack-dev-server --config ./build/webpack.config.js"
},
"keywords": [
"https://git.coding.net/hweijie/July.git"
],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^8.6.4",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.4",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-vue-jsx": "^3.7.0",
"babel-preset-env": "^1.7.0",
"cross-env": "^5.2.0",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"json-loader": "^0.5.7",
"postcss": "^6.0.23",
"postcss-loader": "^2.1.5",
"styled": "^1.0.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"ts-loader": "^4.4.2",
"url-loader": "^1.0.1",
"vue": "^2.5.16",
"vue-loader": "^15.2.4",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.14.0",
"webpack-cli": "^3.0.8"
},
"dependencies": {
"vue-style-loader": "^4.1.0",
"webpack-dev-server": "^3.1.4",
"webpack-merge": "^4.1.3"
}
}