$ npm install --save-dev css-loader

module: {rules: [{test: /\.css$/, loader: 'css-loader'}]
},

module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"]}]
},

module: {rules: [{test: /\.css$/,use: [{ loader: 'style-loader' },{loader: 'css-loader',options: {modules: true}}]}]
},

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

$ npm install --save-dev html-webpack-plugin OpenBrowserPlugin

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');module.exports = {// 附加插件列表plugins: [// 压缩 js 插件new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}}),// 用于简化 HTML 文件（index.html）的创建，提供访问 bundle 的服务。new HtmlWebpackPlugin({title: "react-step-by-step",template: "./index.html"}),// 自动打开浏览器new OpenBrowserPlugin({url: "http://localhost:8080"})]
};

$ npm install --save-dev babel-loader babel-preset-es2015 babel-preset-react

// 关于模块配置
module: {// 模块规则（配置 loader、解析器等选项）rules: [// 这里是匹配条件，每个选项都接收一个正则表达式或字符串// test 和 include 具有相同的作用，都是必须匹配选项// exclude 是必不匹配选项（优先于 test 和 include）// 最佳实践：// - 只在 test 和 文件名匹配 中使用正则表达式// - 在 include 和 exclude 中使用绝对路径数组// - 尽量避免 exclude，更倾向于使用 include{// 语义解释器，将 js/jsx 文件中的 es2015/react 语法自动转为浏览器可识别的 Javascript 语法test: /\.jsx?$/,include: path.resolve(__dirname, "app"),// 应该应用的 loader，它相对上下文解析// 为了更清晰，`-loader` 后缀在 webpack 2 中不再是可选的// 查看 webpack 1 升级指南。loader: "babel-loader",// loader 的可选项options: {presets: ["es2015", "react"]},},]
},

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

module.exports = {//...module: {rules: [{test: /\.css$/,use: ['css-loader','style-loader']}]},//...
}

$ npm install --save-dev file-loader

module.exports = {//...module: {rules: [{test: /\.(png|svg|jpg|gif)$/,use: ['file-loader']}]},//...
}

$ npm i --save-dev image-webpack-loader

{// 图片加载 + 图片压缩test: /\.(png|svg|jpg|gif)$/,loaders: ["file-loader",{loader: "image-webpack-loader",query: {progressive: true,pngquant: {quality: "65-90",speed: 4}}}]
}

module.exports = {//...module: {rules: [{test: /\.(woff|woff2|eot|ttf|svg)$/,use: ['file-loader']}]},//...
}

@font-face {font-family: 'MyDiyFont';src: url('./font/iconfont.eot'); /* IE9*/src: url('./font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('./font/iconfont.woff') format('woff'), /* chrome、firefox */url('./font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('./font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}h1 {font-family: 'MyDiyFont';font-size: 24px;
}p {font-family: 'MyDiyFont';font-size: 18px;
}