Question

我有一个使用Webpack捆绑客户端文件的项目。我们使用ExtractTextWebpackPlugin捆绑CSS。问题是当我编辑一个javascript文件时，尽管CSS状态完全没有变化，但CSS包总是被重建。

如何捆绑CSS，但只有在CSS文件发生变化时？

从我的webpack配置中提取：

{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        use: 'css-loader'
    })
},

...

plugins: [
    new ExtractTextPlugin(isDebug ? '[name].css' : '[name].[chunkhash].css')
],

Answer 1

每当ExtractTextPlugin看到带有import扩展名的css语句时，它都会自动提取css文件的文本内容，无论它是否发生变化

如果您使用它进行调试，请使用style-loader和HMR(Hot Module Replacement)来更好地体验这样的事情

 isDebug
        ? {
            test: /\.css$/,
            use: ["style-loader", "css-loader"]
          }
        : {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
              use: "css-loader"
            })
          }

如果您想使用当前的配置并且不希望ExtractTextPlugin构建css文件，并且您使用import在javascript文件中导入它们，那么您必须以某种方式删除{{1}当import文件

没有变化时，css文件的语句

如果你在你的webpack配置入口部分添加css文件，那么它很容易，因为webpack允许自定义命令参数，你可以通过在{{1}的webpack配置文件中导出css来实现这一点。 }}

function

您可以通过命令参数传递env.includeCss，如此

object

当您不想编译css文件时，

正常运行//webpack.config.js module.exports = function(env) { return { entry: { main: env.includeCss ? ["./src/index.js", "./src/main.css"] //build with css : ["./src/index.js"] //build without css }, . . . . } }而不使用webpack --config ./webpack.config.prod.js --env.includeCss //notice --env.includeCss witch will set env.includeCss as true

Answer 2

与您的问题没有直接关系，但我注意到您使用public class FragmentA extends Fragment implements View.OnClickListener { OnButtonPressed mCallback; Button yourButton; TextView textViewFragA; @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.your_layout, container, false); } @Override public void onActivityCreated(@Nullable Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); yourButton = findViewById(R.id.yourBtn); textViewFragA = findViewById(R.id.textViewFragA); yourButton.setOnClickListener(this); } @Override public void onClick(View view) { switch(view.getId()){ case R.id.yourBtn: mCallback.onButtonPressed(textViewFragA); break; } @Override public void onAttach(Context context) { super.onAttach(context); // This makes sure that the container activity has implemented // the callback interface. If not, it throws an exception try { mCallback = (OnButtonPressed) getActivity(); } catch (ClassCastException e) { throw new ClassCastException(getActivity().toString() + " must implement OnButtonPressed"); } } @Override public void onDetach() { mCallback = null; // Avoid memory leaking super.onDetach(); } /** * Interface called whenever the user has clicked on the Button * @param textView The TextView to add in FragmentB */ public interface OnButtonPressed{ void onButtonPressed(TextView textView); } }来提取CSS。即使您没有更改CSS文件中的内容，这也会使您的css名称发生变化。

改为使用[contenthash]。

https://survivejs.com/webpack/optimizing/adding-hashes-to-filenames/#setting-up-hashing

如果您使用的是ExtractTextPlugin，则应使用[contenthash]。这样，生成的资产只有在内容发生变化时才会失效。

ExtractTextWebpackPlugin始终输出文件，即使没有更改

2 个答案: