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的引入語句了。