Webpack——使用Webpack CSS loader加载器

最新推荐文章于 2024-05-07 03:26:43 发布

七汐爱椰枣

最新推荐文章于 2024-05-07 03:26:43 发布

阅读量337

点赞数

一、什么是loader

loader用于转换应用程序的资源文件，他们是运行在nodejs下的函数，使用参数来获取一个资源的来源并且返回一个新的来源（资源的位置），例如：你可以使用loader来告诉webpack去加载一个coffeeScript或者Babel文件。

二、loader的解析

loader的解析类似模块，一个loader模块会导出一个方法并且可被nodejs写为可兼容的JavaScript,通常情况下通过npm来管理loader,但你也可以把loader放在自己的应用里。

三、安装loader

你可以通过npm来安装loader

或者

四、CSS-loader 实例

1、先建立一个html文件，并引入bundle.js文件。

index.html

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
         8 
       
         9 
       
         10 
       
         11 
       
         12 
       
         13 
       
         14 
       
         15 
       
        <!DOCTYPE html> 
       
        <html  
        lang 
        = 
        "en" 
        > 
       
        <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

 
         1 
       
         2 
       
        require 
        ( 
        './app.css' 
        ) 
        ; 
       
        document 
        . 
        write 
        ( 
        '<h1>Hello Webpack!</h1>' 
        ) 
        ;

3、建立app.css文件，把body 的背景设置为红色。

app.css

4、建立webpack.config.js配置文件，在里边加入加载器。

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
         8 
       
         9 
       
         10 
       
         11 
       
        module 
        . 
        exports 
          
        = 
          
        { 
       
        entry 
        : 
          
        './main.js' 
        , 
       
        output 
        : 
          
        { 
       
        filename 
        : 
          
        'bundle.js' 
       
        } 
        , 
       
        module 
        : 
          
        { 
       
        loaders 
        : 
          
        [ 
       
        { 
          
        test 
        : 
          
        / 
        \ 
        . 
        css 
        $ 
        / 
        , 
          
        loader 
        : 
          
        'style-loader!css-loader' 
          
        } 
        , 
       
        ] 
       
        } 
       
        } 
        ;

5、用npm 安装 css-loader 和style-loader

6、在控制台输入 webpack 进行打包

这样就用webpack的加载器成功打包了css样式文件。以后我们的html里就可以不用看到css的引入语句了。

七汐爱椰枣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Webpack——使用Webpack CSS loader加载器

一、什么是loaderloader用于转换应用程序的资源文件，他们是运行在nodejs下的函数，使用参数来获取一个资源的来源并且返回一个新的来源（资源的位置），例如：你可以使用loader来告诉webpack去加载一个coffeeScript或者Babel文件。二、loader的解析loader的解析类似模块，一个loader模块会导出一个方法并且可被nodejs写为可兼容的JavaScript,...
复制链接

扫一扫