前端之家收集整理的这篇文章主要介绍了
webpack配置项目加载各种静态资源及css预处理器,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_
404_0@继续上篇
https://www.cnblogs.com/chenyingying0/p/12790111.html
@H_
404_0@
@H_
404_0@
修改webpack.config.js
// 打包前端资源
const path = require('path')
const VueLoaderPlugin = require("vue-loader/lib/plugin");
module.exports = {
entry: path.join(__dirname,"src/index.js"),output: {
filename: "boundle.js",path: path.join(__dirname,"dist""vue-loader"'css-loader'
]
},{
test:/\.(gif|jpg|jpeg|png|svg)$/1024, 小于1024的转base64格式
name:'[name]-cyy.[ext]'
}
}
]
}
],plugins: [
请确保引入这个插件!
new VueLoaderPlugin(),],};
@H_
404_0@
@H_
404_0@安装style-loader,url-loader,file-loader (url-loader依赖于file-loader)
cnpm i style-loader url-loader file-loader
@H_
404_0@
@H_
404_0@运行npm run build进行打包
@H_
404_0@出现报错
ERROR in ./src/styles/test.css
Module build Failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError
(1:1) Unknown word
@H_
404_0@
@H_
404_0@原因是style-loader必须在
css-loader的前面,
修改webpack.config.js
@H_
404_0@

@H_
404_0@
@H_
404_0@
@H_
404_0@再次运行npm run build进行打包,成功
@H_
404_0@dist目录里多出现了
logo-cyy.jpg
文件,并且boundle.js应该也是有更新的
@H_
404_0@

@H_
404_0@
@H_
404_0@
@H_
404_0@配置css预处理器stylus演示
@H_
404_0@

@H_
404_0@
@H_
404_0@
@H_
404_0@安装stylus-loader(依赖于stylus)
@H_
404_0@cnpm i stylus-loader stylus
@H_
404_0@
@H_
404_0@npm run build打包
@H_
404_0@