-
Notifications
You must be signed in to change notification settings - Fork 120
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
webpack 完全教程-06-编译css资源 #62
Comments
编译less文件
|
CSS Module的实现
然后把下面的代码交给 webpack:
最后输出
我们通过编译期 renaming 的方式为 CSS 引入了局部变量。 |
sass 编译
|
css文件单独加载通过上面的例子,css文件的引入、解析、运行已经跑通,BUT,目前我们的css文件全部被打包在bundle.js一个文件里面。这可不是一件好事,后续代码量一上来,文件越来越胖,我想老板一定会抓你去做性能优化的,所以,我们需要把css文件单独打包出来。 extract-text-webpack-plugin插件可以帮助我们解决这个问题,现在让我们先来下载。
然后配置webpack。
同时,也需要在我们的index.html去引入bundle.css文件。
执行 另外这里手动去修改index.html是一个不是很友好的体验,这里暂且按下不表,后续我们会通过插件来统一生成build下的资源,这样让调试和部署更加便捷。 |
编译css资源
install
webpack.config.js
创建css文件
编辑style.css
编辑
entry.js
编辑
index.html
运行
The text was updated successfully, but these errors were encountered: