課程
/前端開發
/前端工具
/Vue+Webpack打造todo應用
打包出錯了
2021-01-25
源自:Vue+Webpack打造todo應用 2-1
正在回答
rules中增加以下規則:
{? ? ? ? ? ? ? ? test: /\.css$/,? ? ? ? ? ? ? ? use: ['style-loader', 'css-loader']? ? ? ? ? ? },//配置處理.css文件的第三方處理規則
{
? ? ? ? ? ? ? ? test: /\.css$/,
? ? ? ? ? ? ? ? use: ['style-loader', 'css-loader']
? ? ? ? ? ? },//配置處理.css文件的第三方處理規則
然后去github里對應webpack版本下載安裝對應的css-loader、style-loader版本依賴
我的依賴版本如下,可以作為參考:
? ? "css-loader": "^6.7.1",? ? "style-loader": "^3.1.0",? ? "vue": "^2.6.10",? ? "vue-loader": "^15.7.0",? ? "vue-template-compiler": "^2.6.10",? ? "webpack": "^5.73.0"
? ? "css-loader": "^6.7.1",
? ? "style-loader": "^3.1.0",
? ? "vue": "^2.6.10",
? ? "vue-loader": "^15.7.0",
? ? "vue-template-compiler": "^2.6.10",
? ? "webpack": "^5.73.0"
const?path?=?require('path')const?VueLoaderPlugin?=?require('vue-loader/lib/plugin')const?htmlWebpackplugin?=?require('html-webpack-plugin');module.exports?=?{entry:?path.join(__dirname,?'src/index.js'),output:?{filename:?'bundle.js',path:?path.join(__dirname,?"dist")},module:?{rules:?[//?{//?????test:?/\.(vue|js|jsx)$/,//?????loader:?'eslint-loader',//?????exclude:?/node_modules/,//?????enforce:?'pre'//?},{test:?/\.vue$/,loader:?'vue-loader'},{test:?/\.css$/,loader:?'css-loader'},{test:?/\.styl/,use:?['style-loader','css-loader','stylus-loader']}]},plugins:?[new?htmlWebpackplugin({}),new?VueLoaderPlugin()],mode:?'development'}
謝謝樓主!照你的方法 生成dist了。
慕移動9059126
這個我解決了,webpack版本過高的話需要安裝html-webpack-plugin和vue-loader-plugin插件,然后webpack.config.js的配置如下:
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const htmlWebpackplugin = require('html-webpack-plugin');
module.exports = {
entry:path.join(__dirname,'src/index.js'),
output:{
filename:'bundle.js',
path:path.join(__dirname,'dist')
},
module:{
rules:[
test:/\.vue$/,
loader:'vue-loader'
? ? ? ? test: /\.css$/,
? ? ? ? loader: 'css-loader'
? ? ? ? },
? ? ? ? {
? ? ? ? test:/\.styl/,
? ? ? ? use:[
? ? ? ? ? 'style-loader',
? ? ? ? ? 'css-loader',
? ? ? ? ? 'stylus-loader'
? ? ? ? ]
? ? ? ? test:/\.(gif|jpg|jpeg|png|svg)$/,
? ? ? ? ? ? {
? ? ? ? ? loader:'url-loader',
? ? ? ? ? ? options:{
? ? ? ? ? ? limit:1024,
? ? ? ? ? ? name:'[name]-aaa.[ext ]'
? ? ? ? ? ? }
? ? ? ? ??
? ? ? ? }
]
plugins: [
? ? ? ? new htmlWebpackplugin({
? ? ? ? }),
? ? ? ? new VueLoaderPlugin()
? ? ],
}
我也是這個問題
舉報
用前端最熱門框架Vue+最火打包工具Webpack打造todo應用
1 回答打包時報這個錯誤怎么解決呢?感謝
5 回答這個怎么解決
1 回答老師我這個都根您都一樣,這個報錯怎么解決
2 回答這種報錯是什么原因?怎么解決?
3 回答請問footer.jsx報錯怎么解決?
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2022-08-02
rules中增加以下規則:
然后去github里對應webpack版本下載安裝對應的css-loader、style-loader版本依賴
我的依賴版本如下,可以作為參考:
2021-04-07
2021-04-02
謝謝樓主!照你的方法 生成dist了。
2021-03-19
這個我解決了,webpack版本過高的話需要安裝html-webpack-plugin和vue-loader-plugin插件,然后webpack.config.js的配置如下:
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const htmlWebpackplugin = require('html-webpack-plugin');
module.exports = {
entry:path.join(__dirname,'src/index.js'),
output:{
filename:'bundle.js',
path:path.join(__dirname,'dist')
},
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader'
},
{
? ? ? ? test: /\.css$/,
? ? ? ? loader: 'css-loader'
? ? ? ? },
? ? ? ? {
? ? ? ? test:/\.styl/,
? ? ? ? use:[
? ? ? ? ? 'style-loader',
? ? ? ? ? 'css-loader',
? ? ? ? ? 'stylus-loader'
? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? test:/\.(gif|jpg|jpeg|png|svg)$/,
? ? ? ? use:[
? ? ? ? ? ? {
? ? ? ? ? loader:'url-loader',
? ? ? ? ? ? options:{
? ? ? ? ? ? limit:1024,
? ? ? ? ? ? name:'[name]-aaa.[ext ]'
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ??
? ? ? ? ]
? ? ? ? }
]
},
plugins: [
? ? ? ? new htmlWebpackplugin({
? ? ? ? }),
? ? ? ? new VueLoaderPlugin()
? ? ],
}
2021-03-16
我也是這個問題