如何配置webpack加载和优化CSS文件

在首页上，我有一个“松散”的CSS文件（即@imports其他CSS文件），我想充当全局CSS样式加载现场。该网站本身正在改进，但它还没有准备好完成整个模块加载系统，所以目前，有相当于index.html的客户端将首先击中（并且在那将是模块加载的组件，我将会使用webpack来传输）如何配置webpack加载和优化CSS文件

我想能够使用webpack获取全局CSS并优化它（通过PostCSS和其他插件）。但看起来像webpack只喜欢实际的基于JavaScript的入口点。

我的策略是告诉webpack使用全局CSS作为入口点，并生成一个优化的捆绑CSS，该CSS包含全局的所有@imported CSS。

我需要在该文件上单独运行PostCSS之类的东西吗？或者明确加载PostCSS并在webpack配置中运行它（如果是这样，那么最好的方法是什么？）。

来源

2017-04-18 subdigit

它类似于这样的问题：http://stackoverflow.com/q/38615076/223362只是代替少的，我将使用PostCSS为“编译” CSS变成正常的东西。我想我们都只是想利用webpack的环境，但不必绑定到.js入口点系统。 – subdigit

现在，我使用PostCSS网站上的JS API示例，以便将其用作读取我的全局CSS并将其传输到普通CSS以包含在首页中的基础。

（从JS API sample）

const fs = require('fs'); 
const postcss = require('postcss'); 
const precss = require('precss'); 
const autoprefixer = require('autoprefixer'); 

fs.readFile('src/app.css', (err, css) => { 
    postcss([precss, autoprefixer]) 
     .process(css, { from: 'src/app.css', to: 'dest/app.css' }) 
     .then(result => { 
      fs.writeFile('dest/app.css', result.css); 
      if (result.map) fs.writeFile('dest/app.css.map', result.map); 
     }); 
});

来源

2017-04-20 16:28:32 subdigit

我拒绝接受我自己的答案，因为实际上应该有些更正式的东西。我想我可以把它变成一个插件，或者可能已经有一个插件了。（有一个执行shell命令：https://www.npmjs.com/package/webpack-shell-plugin） – subdigit

如何配置webpack加载和优化CSS文件

回答

相关问题