webpackとpugを組み合わせた開発環境を作っています。
pugのソースの中にimgタグが入っているのですが、webpack-dev-serverで開発環境を立ち上げるとnot-foundになってしまいます。
どの様に設定すればよろしいでしょうか?
ソース
npm
package.json
json
1{ 2 "name": "product", 3 "version": "1.0.0", 4 "description": "", 5 "main": "webpack.config.js", 6 "scripts": { 7 "start": "npm run dev", 8 "dev": "webpack-dev-server", 9 "test": "echo \"Error: no test specified\" && exit 1", 10 "build": "webpack" 11 }, 12 "author": "", 13 "license": "ISC", 14 "dependencies": { 15 "vue": "^2.6.2", 16 "vue-property-decorator": "^7.3.0", 17 "vue-router": "^3.0.2" 18 }, 19 "devDependencies": { 20 "autoprefixer": "^9.4.7", 21 "clean-webpack-plugin": "^1.0.1", 22 "css-loader": "^2.1.0", 23 "file-loader": "^3.0.1", 24 "html-webpack-plugin": "^3.2.0", 25 "postcss-loader": "^3.0.0", 26 "pug": "^2.0.3", 27 "pug-plain-loader": "^1.0.0", 28 "raw-loader": "^1.0.0", 29 "rfs": "^8.0.1", 30 "stylus": "^0.54.5", 31 "stylus-loader": "^3.0.2", 32 "stylus-normalize": "^3.0.3", 33 "ts-loader": "^5.3.3", 34 "typescript": "^3.3.1", 35 "url-loader": "^1.1.2", 36 "vue-class-component": "^6.3.2", 37 "vue-loader": "^15.6.2", 38 "vue-style-loader": "^4.1.2", 39 "vue-template-compiler": "^2.6.2", 40 "webpack": "^4.29.1", 41 "webpack-cli": "^3.2.3", 42 "webpack-dev-server": "^3.1.14" 43 }, 44 "browserslist": [ 45 "> 1%", 46 "last 2 versions", 47 "not ie <= 8" 48 ] 49} 50
コマンド
下記コマンドで、webpack-dev-serverを立ち上げます。
sh
1$ npm start
webpack-config
js
1'use strict' 2 3const path = require('path') 4const webpack = require('webpack') 5 6const vueLoaderPlugin = require('vue-loader/lib/plugin') 7const htmlWebpackPlugin = require('html-webpack-plugin') 8const cleanWebpackPlugin = require('clean-webpack-plugin') 9 10module.exports = { 11 12 mode: 'development', 13 14 entry: { 15 build: './src/index.ts' 16 }, 17 18 output: { 19 path: path.resolve(__dirname, './dist'), 20 filename: '[name].js' 21 }, 22 23 devServer: { 24 contentBase: path.resolve(__dirname, 'public'), 25 watchContentBase: true 26 }, 27 28 module: { 29 rules: [{ 30 test: /.vue$/, 31 loader: 'vue-loader' 32 }, 33 { 34 test: /.tsx?$/, 35 loader: 'ts-loader', 36 exclude: /node_modules/, 37 options: { 38 appendTsSuffixTo: [/.vue$/], 39 } 40 }, 41 { 42 test: /.css$/, 43 use: [ 44 'style-loader', 45 'css-loader' 46 ] 47 }, 48 { 49 test: /.pug$/, 50 oneOf: [{ 51 resourceQuery: /^?vue/, 52 use: [ 53 'pug-plain-loader' 54 ] 55 }, 56 { 57 use: [ 58 'raw-loader', 59 'pug-plain-loader' 60 ] 61 } 62 ] 63 }, 64 { 65 test: /.styl(us)?$/, 66 exclude: /node_modules/, 67 use: [{ 68 loader: 'vue-style-loader' 69 }, 70 { 71 loader: 'css-loader' 72 }, 73 { 74 loader: 'postcss-loader', 75 options: { 76 plugins: [ 77 require('autoprefixer')({ 78 grid: true, 79 browsers: [ 80 "> 1%", 81 "last 2 versions", 82 "not ie <= 8" 83 ] 84 }) 85 ] 86 }, 87 }, 88 { 89 loader: 'stylus-loader' 90 } 91 ] 92 }, 93 { 94 test: /.(png|jpe?g|gif|svg)(?.*)?$/, 95 loader: 'url-loader', 96 options: { 97 limit: 10000 98 } 99 }, 100 ] 101 }, 102 resolve: { 103 extensions: ['.ts', '.js', '.vue', '.json'], 104 alias: { 105 'vue$': 'vue/dist/vue.esm.js' 106 } 107 }, 108 plugins: [ 109 // new cleanWebpackPlugin(['dist']), 110 new htmlWebpackPlugin({ 111 title: 'INDEX', 112 template: './src/index.pug' 113 }), 114 new vueLoaderPlugin() 115 ] 116} 117
pug
index.pugと同じディレクトリに、./assets/img/profile_image.jpg
というファイルを置いています。
doctype html html(lang='jp' dir='ltr') head meta(charset='utf-8') title title body img(src="./assets/img/profile_image.jpg")
あなたの回答
tips
プレビュー