Webpack CSS loader加载器 · web前端

[TOC] # 什么是loader loader用于转换应用程序的资源文件，他们是运行在nodejs下的函数，使用参数来获取一个资源的来源并且返回一个新的来源（资源的位置），例如：你可以使用loader来告诉webpack去加载一个coffeeScript或者Babel文件 # loader的解析 loader的解析类似模块，一个loader模块会导出一个方法并且可被nodejs写为可兼容的JavaScript,通常情况下通过npm来管理loader,但你也可以把loader放在自己的应用里。 # 安装loader 你可以通过npm来安装loader ~~~ npm install xxx-loader --save-dev ~~~ 或者 ~~~ npm install xxx-loader --save ~~~ # CSS-loader 实例 1. 先建立一个html文件，并引入bundle.js文件。 index.html ~~~ <!DOCTYPE html> <html lang="zh"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <script type="text/javascript" src="./bundle.js"></script> </body> </html> ~~~ 2. 建立main.js文件，并用require引入app.css文件。然后写一句话。 main.js ~~~ require('./app.css'); document.write('<h1>Hello Webpack!</h1>'); ~~~ 3. 建立app.css文件，把body 的背景设置为红色。 app.css ~~~ body { background-color: red; } ~~~ 4. 建立webpack.config.js配置文件，在里边加入加载器 test就是我要匹配所有以css结尾的css文件,正则后面就是loader,我们要这2个加载器去执行 ~~~ module.exports = { entry: './main.js', output: { filename: 'bundle.js' }, module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, ] } }; ~~~ 5. 用npm 安装 css-loader 和style-loader ~~~ npm install style-loader --save-dev ~~~ ~~~ npm install css-loader --save-dev ~~~ 6. 在控制台输入 webpack 进行打包 ~~~ webpack ~~~ 这样就用webpack的加载器成功打包了css样式文件。以后我们的html里就可以不用看到css的引入语句了。