Webpack入门教程八

45.安装支持CSS的模块style-loader和css-loader

cnpm install --save-dev style-loader css-loader

46.修改webpack.config.js文件,修改内容如下

module.exports = {
entry:  __dirname + "/app/Greeter.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
devServer:{
contentBase:"./public",
historyApiFallback:true,
inline:true
},
module:{
loaders:[
{
test:/\.json$/,
loader:"json-loader"
},
{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader'
},
{
test:/\.css$/,
loader:'style-loader!css-loader'
}
]
}
}

47.在app目录中创建main.css,内容如下

html {
box-sizing: border-box;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}

*, *:before, *:after {
box-sizing: inherit;
}

body {
margin: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, p, ul {
margin: 0;
padding: 0;
}

48.修改Greeter.js,修改内容如下

import React from 'react';
import {render} from 'react-dom';
import Main from './main';
import './main.css';

render(<Main />,document.getElementById('root'));

49.项目目录结构如下

50.使用webpack进行打包

webpack

51.在浏览器中打开index.html文件,输出如下