java css文件预处理_webpack配置项目加载各种静态资源及css预处理器

修改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"),

},

module: {

rules: [

{

test:/.vue$/,

loader:"vue-loader",

},

{

test:/.css$/,

use:['css-loader','style-loader']

},{

test:/.(gif|jpg|jpeg|png|svg)$/,

use:[

{

loader:'url-loader',

options:{

limit:1024,//小于1024的转base64格式

name:'[name]-cyy.[ext]'}

}

]

}

],

},

plugins: [//请确保引入这个插件！

newVueLoaderPlugin(),

],

};

安装style-loader, url-loader, file-loader (url-loader依赖于file-loader)

cnpm i style-loader url-loader file-loader

运行npm run build进行打包

出现报错

ERROR in ./src/styles/test.css

Module build failed (from ./node_modules/css-loader/dist/cjs.js):

CssSyntaxError

(1:1) Unknown word

原因是style-loader必须在css-loader的前面，修改webpack.config.js

再次运行npm run build进行打包，成功

dist目录里多出现了logo-cyy.jpg文件，并且boundle.js应该也是有更新的

配置css预处理器stylus演示

安装stylus-loader(依赖于stylus)

cnpm i stylus-loader stylus

npm run build打包