2,在test.html文件中,使用div标签创建一行文字,下面将在css文件中定义div的样式。
3,在test.html文件中,给div设置class属性,例如,设置为mydiv。
4,新建一个css文件,命名为test.css,用于编写div的样式。
5,在test.css文件中,给类名为mydiv的div设置css样式,使用font-size定义div文字的大小为20px,使用color定义div的文字的颜色为红色。
6,在test.html文件中,通过link标签引入外部的css文件,实现给页面中的div设置css样式 。
7,在浏览器打开test.html文件,就可以了。
这样就可以完美的解决我们提取css的需求。但是官方不建议我们这样做。他们认为CSS就该打包到JS中减少请求数,看需求吧。
然后在 修改最初的module模块下面的rule里面的css规则变成
上面将css分离出来了。但是图片路径可能不太对
这个不是我们想要的。所以我们要用到publicPath来解决。
在处理前我们在webpack.config.js上声明一个对象叫做 website
这里特别注意的就是 IP和端口 是你本机的IP和你配置的端口
然后在output选项中引用这个对象的publicPath属性