webpack4 二、文件引用

文件引用

1.css文件導入

1.1使用介紹

webpack不支持直接導入樣式文件，需要使用相應的loader才能導入和使用

css-loader   //是webpack可以處理css文件
style-loader //將css-loader處理完的文件變成style標籤插入header裏面

安裝

npm install --save-dev style-loader css-loader

1.2項目結構

• webpack-demo
  • hello.js
  • print.js
  • style.css
  • package.json
  • package-lock.json

css文件內容

html,body{
    padding: 0;
    margin: 0;
}

body{
    background-color: red;
}

導入方式

import printMe from './print.js';
import  'style-loader!css-loader!./style.css';
//在引用css loader之前必須經過css-loader的處理，且執行順序必須如上，否則保錯

function hello(str) {
    printMe()
    alert(str)
}

###1.3結果


2.配置文件配置

後期可以使用配置文件處理loader

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },

    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }, {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            }, {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(csv|tsv)$/,
                use: [
                    'csv-loader'
                ]
            },
            {
                test: /\.xml$/,
                use: [
                    'xml-loader'
                ]
            }
        ]

    }
}
;