webpack没你想的那么难(二):关于loaders

@songhlc 2017-08-27 13:54:16发表于 yonyouyc/blog 原创连载

上期我们了解了如何使用html-webpack-plugin自动生成一个html页面并引入依赖的入口文件

关于css文件的引入

先修改一下目录

|- cofig
   |-webpack.base.config.js    
|- dist
   |- index.html               +
   |- bundle.js              
|- package.json
|- /src
   |- index.css  +
   |- index.js
   |- print.js

在index.js 引入index.css

index.css

body{
    background-color: red;
}

index.js

import './index.css'
var el = document.getElementsByTagName('body')[0]
var div = document.createElement('div')
div.innerHTML = 'Getting Start'
el.appendChild(div)

运行yarn build

ERROR in ./src/index.css
Module parse failed: /Users/windknow/github/blog/resource/2017-08-26/code/src/index.css Unexpected token (1:4)
You may need an appropriate loader to handle this file type.
| body{
|     background-color: red;
| }
 @ ./src/index.js 1:0-20

报错里说清楚了 You may need an appropriate loader to handle this file type.

loader

webpack 的loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用loader来告诉webpack去加载一个png或者css

css-loader

安装loader

yarn add style-loader css-loader

修改webpack配置文件

module.exports = {
// 入口函数,通常来说单页面程序一般只有一个入口函数,所以在这里我们指定了src下的index.js
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'html from template'
    })
  ],
+ module: {
+     rules: [
+       {
+         test: /\.css$/,
+         use: [
+           'style-loader',
+           'css-loader'
+         ]
+       }
+     ]
+   },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, '../dist')
  }
};

运行yarn build 查看 app.bundle.js

// module
exports.push([module.i, "body{\n    background-color: red;\n}", ""]);

打开index.html发现样式也生效了

进阶:如何把css抽取到一个单独的css文件中,而不是在js里

添加依赖

yarn add extract-text-webpack-plugin
# 对于 webpack 3
yarn add extract-text-webpack-plugin
# 对于 webpack 2
yarn add extract-text-webpack-plugin@2.1.2
# 对于 webpack 1
yarn add extract-text-webpack-plugin@1.0.1

修改webpack配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
// 入口函数,通常来说单页面程序一般只有一个入口函数,所以在这里我们指定了src下的index.js
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  plugins: [
    new ExtractTextPlugin("style.css"),
    new HtmlWebpackPlugin({
      title: 'html from template'
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, '../dist')
  }
};

运行yarn build 查看dist/index.html
多了link标签 多了一个独立的css文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>html from template</title>
  <!--多了一行style.css-->
  <link href="style.css" rel="stylesheet"></head>
  <body>
  <script type="text/javascript" src="app.bundle.js"></script><script type="text/javascript" src="print.bundle.js"></script></body>
</html>

关于图片和字体

图片使用

import Icon from './icon.png';

以及

test: /\.(png|svg|jpg|gif)$/,
    use: [
           'file-loader'
    ]

的方式实现

其他一些细节在这里就不再做过多阐述,使用不同的loader即可,具体可以参考https://doc.webpack-china.org/guides/asset-management#-