webpack loader加載器

時間 2019-11-12

標籤 webpack loader 加載简体版

原文原文鏈接

配置loader,經過加載器處理文件，例如css sass less等，告訴webpack每一種文件都須要使用什麼來加載器來處理。css

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命令下載這些包。html

2.修改webpack.config.js文件，將加載器引入node

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文件webpack

//index.css
.demo1 {
    width: 100px;
    height: 100px;
    background: red;
}
.demo2 {
    width: 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中添加以下代碼.web

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

　　打包webpack一下看看效果npm

4.引用多個js文件瀏覽器

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

//tool.js
var tool = {//獲取DOM元素
    getDom: function(className) {
        return document.getElementsByClassName(className)[0];
    }
}

module.exports = tool;//模塊出口

src的js下建立一個demo1.js文件, demo2.js同理babel

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.jsless

require('../css/index.css');

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

    demo1.init();
    demo2.init();

webpack一下, 看看效果

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。