webpack 加载图片css等文件

项目目录如下：
webpack-demo

 |- package.json

 |- webpack.config.js

 |- /dist

     |- bundle.js

     |- index.html 

 |- /src+

    |- style.css

    |- index.js 

 |- /node_modules

1. 到项目的根目录下，npm install style-loader scc-loader --save-dev

2. 在webpack.config.js添加配置 

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' ]}，//加载css

            { test: /\.(png|svg|jpg|gif)$/,use:["file-loader"]}，//加载图片

            { test: /\.(woff|woff2|eot|ttf|otf)$/ , use:["file-loader"] }//加载字体

         ] 

    }

};

  提示：webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。在这种情况下，以 .css 结尾的全部文件，都将被提供给 style-loader 和 css-loader。  

3. 在index.js里import "./style.css",然后npm run build(此时npm run build命令，在package.json里面配置)

加载图片字体等使用 file-loader , npm install file-loader --save-dev

提示：file-loader加载字体时，要进行配置，详细请看加载字体管理资源