zoukankan      html  css  js  c++  java
  • webpack loader加载器

    配置loader,通过加载器处理文件,例如css sass less等,告诉webpack每一种文件都需要使用什么来加载器来处理。

    1.node.js安装好之后也会自动默认安装好npm,所以cmd cd进入当前项目下输入npm install babel-loader babel babel-core css-loader style-loader url-loader file-loader less-loader less --save-dev命令下载这些包。

    2.修改webpack.config.js文件,将加载器引入

    module.exports = {
        entry :  './src/js/entry.js',
        output : {
            filename : 'index.js',
            path : __dirname + '/out'
        },
        module : {
            rules: [
                {test: /.js$/, use: ['babel-loader']},
                {test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style标签里*/
                //{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css变成文件通过link标签引入*/
                {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析图片*/
                {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成浏览器可以识别的css语言*/
            ]
        },
        }

    3.在项目文件夹下的src文件夹下的css文件下创建index.css,并且修改index.html文件

    //index.css
    .demo1 {
         100px;
        height: 100px;
        background: red;
    }
    .demo2 {
         200px;
        height: 200px;
        background: orange;
    }
    //index.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title>text</title>
    </head>
    <body>
    <div class="demo1"></div>
    <div class="demo2"></div>
    <script src="./out/index.js"></script>
    </body>
    </html>

    因为在webpack中所有文件都是模块, 所以必须要将css引入. 在刚刚的entry.js中添加如下代码.

    //entry.js
    require('../css/index.css');//引入css文件
    console.log("1234");
    

      打包webpack一下看看效果

    4.引用多个js文件

    在src文件下新建tool.js文件

    //tool.js
    var tool = {//获取DOM元素
        getDom: function(className) {
            return document.getElementsByClassName(className)[0];
        }
    }
    
    module.exports = tool;//模块出口

    src的js下创建一个demo1.js文件, demo2.js同理

    var obj = require('./tool.js');
        var demo1 = {
        init: function() {
            this.bindEvent();
        },
        bindEvent: function() {
            //var demo1 = document.getElementsByClassName('demo1')[0];
            var demo1 = obj.getDom('demo1');
            demo1.onclick = this.changeStyle;
        },
        changeStyle: function() {
            this.style.width = '200px';
            this.style.height = '200px';
            this.style.background = 'green';
            console.log('1');
        }
    }
    
    module.exports = demo1;

    修改入口文件entry.js

    require('../css/index.css');
    
    var demo1 = require('../js/demo1.js');
    var demo2 = require('../js/demo2.js');
    
        demo1.init();
        demo2.init();

     webpack一下, 看看效果 

  • 相关阅读:
    瀑布流
    轮播图
    封装动画的函数
    回到顶部带动画
    动画setInterval
    模拟滚动条
    放大镜
    刷新
    cookie
    拖拽
  • 原文地址:https://www.cnblogs.com/15fj/p/7892464.html
Copyright © 2011-2022 走看看