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'
                ]
            }
        ]

    }
}
;